Button

Clickable element for triggering actions.


MDN: <button> 

<div data-header>
  <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>

Use the link variant only for <a> elements with role="button".

Usage

A <button> element. For link-styled actions use <a role="button">.

Optional SVG icon element

<button>
  Button
</button>

Examples

Variant

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

<div 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-example="variant" data-variant="outline">
  <button class="outline">
    Outline
  </button>
</div>
<div 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-example="variant" data-variant="ghost">
  <button class="ghost">
    Ghost
  </button>
</div>
<div 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-example="variant" data-variant="link">
  <a role="button" href="#" class="link">
    Link
  </a>
</div>

Size

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

<div data-example="size" data-variant="xs">
  <button class="xs">
    Extra Small
  </button>
</div>
<div 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-example="size" data-variant="default">
  <button>
    Button
  </button>
</div>
<div 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>

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-example="icon" data-variant="icon">
  <button class="outline xs icon" aria-label="XS 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>
  <button class="outline sm icon" aria-label="SM 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>
  <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>
  <button class="outline lg icon" aria-label="LG 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>

Round

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

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

States

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

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