<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>

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>