Catalog Buttons

<.utility>

ConnieUI.Buttons

HEEx
<ConnieUI.Buttons.utility icon="icon-copy-01" aria_label="Copy" />

Variant matrix

Every combination of one or two attributes, side by side.

Controls

:string
:string
:string
:string

the icon's colour. `success` is for an action that completes something, like resolving

:string

the button's accessible name; an icon on its own gives a screen reader nothing to read

Set by the example

click

Docs

A small utility icon button following UntitledUI's secondary utility button style. Skeuomorphic shadow, rounded-md, ring-primary border.
Attribute Type Default Description
icon * :string
click {:struct, Phoenix.LiveView.JS} nil
type :string "button"
button | submit | reset
disabled :boolean false
size :string "xs"
xs | sm
color :string "gray"
the icon's colour. `success` is for an action that completes something, like resolving gray | success
aria_label :string nil
the button's accessible name; an icon on its own gives a screen reader nothing to read