Button
Triggers an action. Five variants, plus a semantic range for when the action carries meaning. The colour dials and radius up top restyle everything live.
colour
variant
size
icon
state
colour always tints - the default primary is monochrome, so its outline reads neutral until you dial a hue up top; secondary follows the second dial
Variants
Semantic colours
Sizes
States
Icon button
Properties
<.button>
| Attribute | Type | Default | Description |
|---|---|---|---|
class
|
any |
nil
|
CSS class |
color
|
string |
"primary"
|
button color
one of: "primary", "secondary", "info", "success", "warning", "danger", "gray", "pure_white", "white", "light", "dark"
|
disabled
|
boolean |
false
|
indicates a disabled state |
icon
|
any |
nil
|
name of a Heroicon rendered beside the label |
icon_placement
|
string |
"left"
|
which side of the label the icon sits on - and where the loading spinner appears, so the layout doesn't jump when a button enters its loading state
one of: "left", "right"
|
label
|
string |
nil
|
labels your button |
link_type
|
string |
"button"
|
one of: "a", "live_patch", "live_redirect", "button"
|
loading
|
boolean |
false
|
indicates a loading state |
radius
|
string |
nil
|
button border radius; when unset the --pc-radius theme token applies
one of: nil, "none", "sm", "md", "lg", "xl", "full"
|
rest
|
global |
||
size
|
string |
"md"
|
button sizes; icon renders a square, md-height icon button (pair with an aria-label)
one of: "xs", "sm", "md", "lg", "xl", "icon"
|
to
|
string |
nil
|
link path |
variant
|
string |
"solid"
|
button variant. solid/soft/light/outline/ghost are the supported fill styles (soft adapts its tint to dark mode; light stays light in both modes). inverted and shadow are legacy, slated for removal in a future major - prefer outline, and compose effects (border_beam / shine_border) for flourish
one of: "solid", "soft", "light", "outline", "inverted", "shadow", "ghost"
|
with_icon
|
boolean |
false
|
legacy: icon spacing is part of the base button now; kept for compatibility, removed in 5.0 |
:inner_block
slot
|
slot |
<.icon_button>
| Attribute | Type | Default | Description |
|---|---|---|---|
class
|
any |
nil
|
CSS class |
color
|
string |
"gray"
|
one of: "primary", "secondary", "info", "success", "warning", "danger", "gray"
|
disabled
|
boolean |
false
|
indicates a disabled state |
link_type
|
string |
"button"
|
one of: "a", "live_patch", "live_redirect", "button"
|
loading
|
boolean |
false
|
indicates a loading state |
radius
|
string |
"full"
|
button radius
one of: "none", "sm", "md", "lg", "xl", "full"
|
rest
|
global |
||
size
|
string |
"sm"
|
one of: "xs", "sm", "md", "lg", "xl"
|
to
|
string |
nil
|
link path |
tooltip
|
string |
nil
|
tooltip text |
with_icon
|
boolean |
false
|
adds some icon base classes |
:inner_block
slot
|
slot |