Forms & inputs
Buttons & actions
Variants, colors, sizes and icon buttons.
Variants × colors, sizes, and icon buttons.
Defaults: variant="outline" color="primary" size="md".
Variants
Six surface styles. Color is primary by default.
<.button :for={v <- ~w(solid soft surface outline dashed ghost)} variant={v}>
{v}
</.button>Colors
primary, danger, warning, success, info — shown on solid.
<.button :for={c <- ~w(primary danger warning success info)} variant="solid" color={c}>
{c}
</.button>Sizes
Text sizes xs–xl, icon size, and the disabled state.
<.button :for={s <- ~w(xs sm md lg xl)} size={s}>{s}</.button>
<.button size="icon" aria-label="Add"><.icon name="plus" /></.button>
<.button variant="solid" disabled>disabled</.button>Button group
Joined segmented control — shared borders and radius.
Icon buttons with label + kbd
On icon-* sizes, label is the accessible name and tooltip; kbd is the optional hint in that tip. variant ghost/outline/solid.
API reference
Props and slots, introspected from the component.
| Prop | Type | Default | Description |
|---|---|---|---|
class |
any |
nil |
Extra classes merged onto the root element. |
color |
primary | danger | warning | success | info |
"primary" |
Semantic color token for the button surface. |
disabled |
boolean |
false |
Render disabled and non-interactive. A `<button>` gets the real `disabled` attribute; a link (`navigate`/`patch`/`href`) has no such attribute, so it gets `data-disabled` + `aria-disabled="true"` + `tabindex="-1"` — CSS then removes pointer events, matching the `<button>` behavior. |
href |
any |
nil |
External/full-page href; renders as a link. |
kbd |
string |
nil |
Optional keyboard hint shown in the tooltip after `label`. |
label |
string |
nil |
Accessible name (`aria-label`). On `icon-*` sizes the control is also wrapped in `tooltip/1` with this copy. |
navigate |
string |
nil |
LiveView navigate target; renders as a link. |
patch |
string |
nil |
LiveView patch target; renders as a link. |
size |
one of 11 values |
"md" |
Control height; icon-* sizes are square. |
variant |
solid | soft | surface | outline | dashed | ghost |
"outline" |
Surface style: solid fills, outline borders, ghost is transparent. |
| Slots | |||
:inner_block* |
Button label or content. | ||