<button>

The <button> element is a native interactive control that is keyboard-accessible and focusable by default, requiring no additional ARIA.

On how to turn non-button elements into buttons, see [role="button"].

Basic Usage

<button>
  Button
</button>

Links styled as buttons

Use .button on an anchor to give it button styling while preserving its link semantics and native keyboard behavior:

<a href="/guide" class="button">
  Read the guide
</a>
<a href="/download" class="button secondary ghost size-sm">
  Download
</a>

For actions, use a native <button>. Use role="button" only when the element behaves as a button, including the appropriate keyboard interaction.

Border radius

Use --buttons-border-radius to customize button corners independently of the global --border-radius. It defaults to var(--border-radius), preserving the existing appearance.

:root {
  --buttons-border-radius: 999px;
}

This applies to native buttons, button inputs, .button, [role="button"], and file selector buttons. For an individual button, set --_buttons-border-radius directly:

<button style="--_buttons-border-radius: 0">Square button</button>

Variants

Intent Variants

To convey intent and importance, buttons can be styled with different variants. The default variant is .primary, which is used for the most important actions on a page, but there are also:

See code

<section class="auto-grid">
  <button class="primary">
    Button
  </button>
  <button class="secondary">
    Button
  </button>
  <button class="contrast">
    Button
  </button>
  <button class="success">
    Button
  </button>
  <button class="info">
    Button
  </button>
  <button class="warning">
    Button
  </button>
  <button class="danger">
    Button
  </button>
</section>

Modifiers

.ghost creates transparent background buttons with colored text and borders, useful for secondary actions where you want minimal visual weight.

See code

<section class="auto-grid">
  <button class="primary ghost">
    Button
  </button>
  <button class="secondary ghost">
    Button
  </button>
  <button class="contrast ghost">
    Button
  </button>
  <button class="success ghost">
    Button
  </button>
  <button class="info ghost">
    Button
  </button>
  <button class="warning ghost">
    Button
  </button>
  <button class="danger ghost">
    Button
  </button>
</section>

.subtle creates buttons with a more muted appearance, often used for less prominent actions.

See code

<section class="auto-grid">
  <button class="primary subtle">
    Button
  </button>
  <button class="secondary subtle">
    Button
  </button>
  <button class="contrast subtle">
    Button
  </button>
  <button class="success subtle">
    Button
  </button>
  <button class="info subtle">
    Button
  </button>
  <button class="warning subtle">
    Button
  </button>
  <button class="danger subtle">
    Button
  </button>
</section>