Button

Triggers an action or event. Six variants, four sizes. Uses <button> or <a>. Zero JavaScript required.

Component Specification — components/button/button.md

Native basis

<button> or <a> with .btn. No JS needed for any variant.

Web Platform APIs

<button> :focus-visible

Variants (data-variant)

default--primary / --primary-foreground secondary--secondary / --secondary-foreground outlinetransparent + --border, hover: --accent ghosttransparent, hover: --accent destructive--destructive / --destructive-foreground link--primary text, underline on hover, no padding

Sizes (data-size)

xs1.75rem0 0.5rem padding sm2rem0 0.75rem padding default2.25rem0 1rem padding lg2.75rem0 2rem padding icon2.25rem²square, no padding icon-sm2rem²square small icon-lg2.75rem²square large

Accessibility

• Use disabled attribute for disabled state

• Add aria-label on icon-only buttons

• Set type="button" inside forms to prevent accidental submit

• SVGs inside buttons auto-size to 1rem unless they have a size-* class

Variants

Six styles via data-variant. Default has a solid primary fill.

<button class="btn" data-variant="default">Default</button>
<button class="btn" data-variant="secondary">Secondary</button>
<button class="btn" data-variant="outline">Outline</button>
<button class="btn" data-variant="ghost">Ghost</button>
<button class="btn" data-variant="destructive">Destructive</button>
<button class="btn" data-variant="link">Link</button>

Sizes

Four sizes via data-size, plus icon-only variants.

<button class="btn" data-variant="outline" data-size="xs">Extra Small</button>
<button class="btn" data-variant="outline" data-size="sm">Small</button>
<button class="btn" data-variant="outline">Default</button>
<button class="btn" data-variant="outline" data-size="lg">Large</button>

Icon

Square button for icon-only actions. Requires aria-label.

<button class="btn" data-variant="outline" data-size="icon"
        aria-label="Settings">
  <svg aria-hidden="true" width="15" height="15" ...>...</svg>
</button>

<button class="btn" data-variant="outline" data-size="icon-sm"
        aria-label="Settings">
  <svg aria-hidden="true" width="14" height="14" ...>...</svg>
</button>

<button class="btn" data-variant="outline" data-size="icon-lg"
        aria-label="Settings">
  <svg aria-hidden="true" width="18" height="18" ...>...</svg>
</button>

With Icon

Icons auto-size to 1rem. Place before or after the label.

<button class="btn" data-variant="default">
  <svg aria-hidden="true" width="15" height="15" ...>...</svg>
  GitHub
</button>

<button class="btn" data-variant="outline">
  <svg aria-hidden="true" width="15" height="15" ...>...</svg>
  Download
</button>

Disabled button with a spinning icon to indicate pending action.

<button class="btn" data-variant="default" disabled>
  <svg aria-hidden="true" width="15" height="15"
       style="animation: spin 1s linear infinite;"
       viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2">
    <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
  </svg>
  Loading...
</button>

Disabled

50% opacity, no pointer events.

<button class="btn" data-variant="default" disabled>Default</button>
<button class="btn" data-variant="outline" disabled>Outline</button>
<button class="btn" data-variant="secondary" disabled>Secondary</button>

As Link

Use <a> instead of <button> for navigation.

Navigate Learn more

<a href="/page" class="btn" data-variant="default">Navigate</a>
<a href="/docs" class="btn" data-variant="outline">Learn more</a>