Buttons

Make the next step clear with a short, descriptive label. Use a button for an action and a link for navigation.

Base and palette variants

btn provides the shape, spacing, and inherited typography. Add btn-primary or btn-secondary to use an existing palette pair. These sample buttons demonstrate appearance and do not run an action.

<div class="flex flex-wrap gap-16 items-center">
  <button class="btn" type="button">Base button</button>
  <button class="btn btn-primary" type="button">Primary button</button>
  <button class="btn btn-secondary" type="button">Secondary button</button>
</div>

Navigation and unavailable actions

Keep navigation as a real link, even when it looks like a button. Use the native disabled attribute for an unavailable button; it prevents activation. Anchors do not support that attribute.

<div class="flex flex-wrap gap-16 items-center">
  <a class="btn btn-primary" href="/docs/installation/">Read the installation guide</a>
  <button class="btn btn-secondary" type="button" disabled>Action unavailable</button>
</div>

Spacing and keyboard focus

Use spacing utilities to adjust the base padding. Tab through the enabled controls to see the focus outline; a focused link opens with Enter, while a native button supports Enter and Space. The disabled button is skipped in the normal Tab sequence.

<div class="flex flex-wrap gap-16 items-center">
  <a class="btn btn-secondary py-8 px-16" href="/docs/colors/#buttons">Explore button colors</a>
  <button class="btn btn-primary py-8 px-16" type="button">Compact button</button>
</div>

Button colors follow the existing foreground and background variables. Customize them through the Colors and palettes guide, then check text, borders, and focus outlines against their surroundings. A named palette pair does not guarantee accessible contrast.