Buttons

Variants

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

Sizes

<button class="btn btn--primary btn--sm">Small</button>
<button class="btn btn--primary">Medium (default)</button>
<button class="btn btn--primary btn--lg">Large</button>

Disabled states

Use the native disabled attribute or aria-disabled="true" (plus pointer-events: none) for non-button elements.

With icons

<!-- Icon left of label -->
<button class="btn btn--primary">
  <svg ...></svg>
  Continue
</button>

<!-- Icon-only: use btn--icon-md and aria-label -->
<button class="btn btn--ghost btn--icon-md" aria-label="Settings">
  <svg ...></svg>
</button>

Token reference