PAGE 02 · BUTTONS
Buttons
Five variants, four sizes, all states. Use one primary per view; secondary for parallel actions; ghost for tertiary; text for inline; danger only for destructive irreversible actions.
01.
Variants
Each variant has a single semantic role.
Variants · md size
PRIMARY
SECONDARY
GHOST
TEXT
DANGER
02.
Sizes
Four sizes. xs for inline-table actions only.
Sizes · primary variant
XS · 24h
SM · 32h
MD · 40h (default)
LG · 48h
03.
States
Default, hover, focus, active, disabled, loading.
States · primary md
DEFAULT
HOVER
FOCUS
ACTIVE
DISABLED
LOADING
04.
With icons
Icon left for verbs, right for navigation, only for icon-only actions.
Icon usage
ICON LEFT
ICON RIGHT
ICON ONLY
FULL WIDTH
05.
Spec
Token-level specification.
Token spec
| Property | Token | Value |
|---|---|---|
| height (md) | --btn-h-md | 40px |
| padding-x (md) | --s-4 | 16px |
| radius | --r-md | 8px |
| font-size (md) | --t-small | 14px / 500 weight |
| icon size | — | 14px (md), 12px (sm), 16px (lg) |
| icon gap | --s-2 | 8px |
| focus ring | --ring-focus | 0 0 0 3px rgba(teal-500, 0.3) |
| transition | --d-1 | 120ms cubic-bezier(.4,0,.2,1) |
| min hit target | — | 44×44 (mobile), 32×32 (desktop dense) |