Button

Clickable element for triggering actions.

MDN: <button> 
<div data-header>
  <button>
    Button
  </button>
</div>

Use native <button> elements for actions. Add the button class to an <a href> when navigation should look like a button. The link variant styles a button like a link.

Usage

A native <button> element for actions, or an <a href class="button"> element when navigation should look like a button.

  • svg — Icon. Optional SVG icon element. Optional.
  • ::before — Spinner. Loading spinner shown during busy state. Optional.
  • text — Label. Button label text. Optional.
<button>
  Button
</button>

Examples

Variant

Controls the visual style of the button. The default variant uses the primary color.

<div data-component="button" data-dimension="variant">
  <div data-component="button" data-example="variant" data-variant="default">
    <button>
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
        <path fill="currentColor" d="m16 2l-4.55 9.22l-10.17 1.47l7.36 7.18L6.9 30l9.1-4.78L25.1 30l-1.74-10.13l7.36-7.17l-10.17-1.48Z">
        </path>
      </svg>
      Button
    </button>
  </div>
  <div data-component="button" data-example="variant" data-variant="outline">
    <button class="outline">
      Outline
    </button>
  </div>
  <div data-component="button" data-example="variant" data-variant="secondary">
    <button class="secondary">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
        <path fill="currentColor" d="m16 2l-4.55 9.22l-10.17 1.47l7.36 7.18L6.9 30l9.1-4.78L25.1 30l-1.74-10.13l7.36-7.17l-10.17-1.48Z">
        </path>
      </svg>
      Secondary
    </button>
  </div>
  <div data-component="button" data-example="variant" data-variant="ghost">
    <button class="ghost">
      Ghost
    </button>
  </div>
  <div data-component="button" data-example="variant" data-variant="destructive">
    <button class="destructive">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
        <path fill="currentColor" d="M12 12h2v12h-2zm6 0h2v12h-2z">
        </path>
        <path fill="currentColor" d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20zm4-26h8v2h-8z">
        </path>
      </svg>
      Delete
    </button>
  </div>
  <div data-component="button" data-example="variant" data-variant="link">
    <button class="link">
      Link
    </button>
  </div>
</div>

Size

Controls the height, padding, and font size of the button.

<div data-component="button" data-dimension="size">
  <div data-component="button" data-example="size" data-variant="xs">
    <button class="xs">
      Extra Small
    </button>
  </div>
  <div data-component="button" data-example="size" data-variant="sm">
    <button class="sm">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
        <path fill="currentColor" d="m16 2l-4.55 9.22l-10.17 1.47l7.36 7.18L6.9 30l9.1-4.78L25.1 30l-1.74-10.13l7.36-7.17l-10.17-1.48Z">
        </path>
      </svg>
      Small
    </button>
  </div>
  <div data-component="button" data-example="size" data-variant="default">
    <button>
      Button
    </button>
  </div>
  <div data-component="button" data-example="size" data-variant="lg">
    <button class="lg">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
        <path fill="currentColor" d="m16 2l-4.55 9.22l-10.17 1.47l7.36 7.18L6.9 30l9.1-4.78L25.1 30l-1.74-10.13l7.36-7.17l-10.17-1.48Z">
        </path>
      </svg>
      Large
    </button>
  </div>
</div>

Icon

Removes padding and sets aspect-ratio: 1 for a square button. Combine with a size class: xs icon, sm icon, lg icon.

<div data-component="button" data-dimension="icon">
  <div data-component="button" data-example="icon" data-variant="icon">
    <button class="outline icon" aria-label="Icon button">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
        <path fill="currentColor" d="m16 2l-4.55 9.22l-10.17 1.47l7.36 7.18L6.9 30l9.1-4.78L25.1 30l-1.74-10.13l7.36-7.17l-10.17-1.48Z">
        </path>
      </svg>
    </button>
  </div>
</div>

Round

Applies fully rounded corners. Use with icon buttons for a circle.

<div data-component="button" data-dimension="round">
  <div data-component="button" data-example="round" data-variant="round">
    <button class="icon round" aria-label="Round icon button">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
        <path fill="none" d="m16 7l1.912 3.667l4.088.506l-3 2.753l.6 4.074l-3.6-2.292L12.4 18l.6-4.074l-3-2.753l4.2-.506z">
        </path>
        <path fill="currentColor" d="M16 2A11.013 11.013 0 0 0 5 13a10.9 10.9 0 0 0 2.216 6.6s.3.395.349.452L16 30l8.439-9.953c.044-.053.345-.447.345-.447l.001-.003A10.9 10.9 0 0 0 27 13A11.013 11.013 0 0 0 16 2m3.6 16L16 15.709L12.4 18l.6-4.074l-3-2.753l4.2-.507L16 7l1.912 3.667l4.088.506l-3 2.753Z">
        </path>
      </svg>
    </button>
  </div>
</div>

States

Similar to all components, the button and its parts can be in certain states.

<div data-component="button" data-dimension="states">
  <div data-component="button" data-example="states" data-variant="disabled">
    <button disabled class="outline">
      Disabled
    </button>
  </div>
  <div data-component="button" data-example="states" data-variant="busy">
    <button aria-busy="true" disabled class="secondary">
      Loading
    </button>
  </div>
</div>