Buttons

The first component, because it forces every visual-language decision: color, radius, spacing, focus. All variants are token-only — no hardcoded values.

Variants

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-ghost">Ghost</button>

Sizes

States

Focus rings use --color-focus-ring — tab to see.

With icons