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.
Each variant has a single semantic role.
Four sizes. xs for inline-table actions only.
Default, hover, focus, active, disabled, loading.
Icon left for verbs, right for navigation, only for icon-only actions.
Token-level specification.
| 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) |