Button

The button triggers an action with a click or key press. Use it for submitting forms, confirming decisions, and opening overlays like dialogs; for a set of related actions, attach several into a button group.

<button class="btn btn-outline">Button</button>
<button class="btn btn-outline btn-icon" aria-label="Submit">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
</button>

Usage

Add the btn class to a <button> or <a> element.

Class	Description
`btn`	Add to a `<button>` or `<a>` element
`btn-secondary` `btn-destructive` `btn-outline` `btn-ghost` `btn-link`	Add to `btn` to pick a variant
`btn-xs` `btn-sm` `btn-lg`	Add to `btn` to change the size
`btn-icon`	Add to `btn` for a square icon-only button; combines with any size
`icon-start` `icon-end`	Add to a leading or trailing icon for the correct spacing

<button class="btn">Save changes</button>
<a href="/signup" class="btn btn-outline btn-lg">Sign up</a>

Examples

Variants

Use the variant classes to communicate intent and hierarchy.

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

Size

Use the size classes to change the size of the button.

<div class="flex items-center gap-2">
  <button class="btn btn-outline btn-xs">Extra Small</button>
  <button class="btn btn-outline btn-xs btn-icon" aria-label="Submit">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
  </button>
</div>
 
<div class="flex items-center gap-2">
  <button class="btn btn-outline btn-sm">Small</button>
  <button class="btn btn-outline btn-sm btn-icon" aria-label="Submit">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
  </button>
</div>
 
<div class="flex items-center gap-2">
  <button class="btn btn-outline">Default</button>
  <button class="btn btn-outline btn-icon" aria-label="Submit">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
  </button>
</div>
 
<div class="flex items-center gap-2">
  <button class="btn btn-outline btn-lg">Large</button>
  <button class="btn btn-outline btn-lg btn-icon" aria-label="Submit">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
  </button>
</div>

With icons

Place an icon before or after the label, and add icon-start or icon-end to it for the correct spacing. For a square icon-only button, add btn-icon and give it an aria-label; for a loading state, pair disabled with a spinning icon.

<button class="btn btn-outline">
  <svg class="icon-start" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
  Export
</button>
<button class="btn btn-outline">
  Open
  <svg class="icon-end" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
<button class="btn btn-outline btn-icon" aria-label="More">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
</button>
<button class="btn btn-outline" disabled>
  <svg class="icon-start animate-spin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
  Generating
</button>

Button group

Attach related buttons into one segmented control with a button group.

<div class="btn-group">
  <button class="btn btn-outline">Archive</button>
  <button class="btn btn-outline">Report</button>
  <button class="btn btn-outline">Snooze</button>
</div>