Button
Inspect
Examples
Variants
Inspect
Sizes
Inspect
With icons
Icons carry a couple of pixels of blank space inside their viewBox, so equal
padding on both sides makes the icon side read as roomier. Buttons pull each
edge icon back by --icon-inset (2px) to even that out. ButtonArrow opts out
and sets its own larger pull, since a chevron carries more internal air.
Inspect
Icon buttons
Inspect
Count badge
Icon buttons with a live count (chat, cart) use NotchBadge: the badge floats
over the top-end corner and a matching notch is masked out of the button, so
the gap is see-through instead of painted (works over any background).
Inspect
Disabled state
Inspect
Border radius
Inspect
Link mode
Inspect
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "mono" | "destructive" | "destructive-dim" | "secondary" | "secondary-dim" | "tertiary" | "outline" | "outline-active" | "dashed" | "ghost" | "shadow" | "shimmer" | "link" | "dim" | "foreground" | "inverse" | "primary" | Visual style. |
| size | "lg" | "md" | "md-to-sm" | "sm" | "xs" | "icon-lg" | "icon" | "icon-sm" | "md" | Height, padding and icon scale. The icon-* sizes are square, for icon-only buttons. |
| radius | "md" | "full" | "md" | Corner rounding. |
| mode | "default" | "icon" | "link" | "input" | "default" | Behavioral preset: icon-only sizing, inline link styling, or input-trigger styling (selects, date pickers). |
| selected | boolean | false | Renders the pressed/selected state. |
| asChild | boolean | false | Merge props onto the child element (e.g. a Link) instead of rendering a <button>. |
| disabled | boolean | false | Disables the button. |