Use cases
- Primary call-to-action (
variant="default") — one per region, the most important action. - Destructive confirmation (
variant="destructive") — delete, archive. Always pair with a confirm flow. - Secondary action alongside a primary (
variant="outline"orvariant="secondary"). - Inline action without a strong border (
variant="ghost"). - Link-styled action within prose (
variant="link").
When NOT to use
- For navigation that is purely a link with no side effect → use a
<Link/>directly. - For toggle state → use a Toggle / Switch (planned).
Variants
| Variant | Use when |
|---|---|
default | The primary action in a context. One per region. |
destructive | Confirming a destructive action (delete, archive). |
outline | Secondary alongside a primary. |
secondary | Alternative when "outline" is too quiet for the brand context. |
ghost | Tertiary, in toolbars, low-density rows. |
link | Inline within prose, where a button would feel heavy. |
Sizes
| Size | Height | Use when |
|---|---|---|
sm | 32px | Dense toolbars, secondary actions in tables. |
md | 40px | Default for most desktop UIs. |
lg | 44px | Mobile primary actions (44px touch-target rule). |
icon | 40×40 | Icon-only square. Always pair with aria-label. |
Composition
- Pair with
leadingIcon/trailingIcon(from@yashiel/mihcm-icons) for affordance. - For loading states, use
isLoading— setsaria-busyand disables interaction. - For disabled states, use
disableddirectly. The visual treatment is the same as loading;aria-busyis the differentiator for assistive tech.
Related
- Text — typography primitive.
- Planned:
IconButton,ButtonGroup,Toggle.