Buttons
The full action vocabulary — variants, tones, sizes, icon, loading, block & disabled. Every fill is a role token, so all 12 accents retheme for free.
Hierarchy
Variants
One primary per view; secondary, tonal & ghost carry the rest.
Shape
Pill buttons
Fully-rounded variant for filter bars & toolbars.
Semantic
Pair color with a glyph — never color alone
Tones
Status-bound actions — solid for confirm flows, soft for low-stakes inline use.
Density
Sizes
32 / 38 / 44px control heights for compact rows up to hero CTAs.
Affordance
Leading & trailing icons
16px Tabler glyphs, optical gap, decorative & aria-hidden.
Compact
Icon-only
Square hit-target; each carries an aria-label.
Async
Loading state
Spinner replaces the label, width preserved, clicks blocked.
Layout & states
Block & disabled
Full-width for forms; disabled removes glow & blocks pointer.
Reference
Variant × tone matrix
How every variant resolves against the accent and each semantic tone.
| Variant | Accent | Success | Warning | Danger | Info |
|---|---|---|---|---|---|
| Primary | |||||
| Solid | |||||
| Secondary | |||||
| Ghost |