Button

A Tailwind CSS button component with multiple variants, sizes, and icon support.

<button class="btn">Button</button>

Variants

Use different variants to communicate intent and hierarchy.

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

Sizes

Use different sizes to fit various contexts and layouts.

<button class="btn btn-xs">Extra small</button>
<button class="btn btn-sm">Small</button>
<button class="btn">Base</button>
<button class="btn btn-lg">Large</button>
<button class="btn btn-icon-lg" aria-label="Add item">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
</button>
<button class="btn btn-icon" aria-label="Add item">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
</button>
<button class="btn btn-icon-sm" aria-label="Add item">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
</button>
<button class="btn btn-icon-xs" aria-label="Add item">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
</button>

With icons

Buttons can include icons alongside text or as the only content. For icon-only buttons, always include an aria-label for accessibility.

<button class="btn btn-icon" aria-label="More options">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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">
  Open
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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-ghost btn-icon" aria-label="Close">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>

Disabled

Disable buttons to prevent interaction, such as while processing a request.

<button class="btn" disabled="">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
  Processing
</button>

Customization

You can combine button classes with Tailwind utilities for custom styling.

<button
  class="btn bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500 text-white border-0 px-6 rounded-full shadow-lg hover:shadow-xl hover:scale-105 transition-all"
>
  Gradient Button
</button>

How it works

The button component is a CSS-only component with variant and size classes. It supports icons, disabled states, and can be used on <button> or <a> elements.

Structure

A button uses the .btn class as its base:

<button class="btn btn-primary">Button</button>

Buttons can also be links:

<a href="#" class="btn btn-primary">Link Button</a>

For grouping buttons, see Button Group.

Class reference

Class	Description
`btn`	Add to `<button>` or `<a>` element to apply base button styles
`btn-primary`	Add to `.btn` for primary filled style
`btn-destructive`	Add to `.btn` for red destructive/danger style
`btn-secondary`	Add to `.btn` for secondary muted style
`btn-outline`	Add to `.btn` for transparent style with a border
`btn-ghost`	Add to `.btn` for transparent style with hover background
`btn-link`	Add to `.btn` for link style with underline on hover
`btn-xs`	Add to `.btn` for extra small size
`btn-sm`	Add to `.btn` for small size
`btn-base`	Add to `.btn` for base size (default)
`btn-lg`	Add to `.btn` for large size
`btn-icon-xs`	Add to `.btn` for extra small square icon button
`btn-icon-sm`	Add to `.btn` for small square icon button
`btn-icon`	Add to `.btn` for square icon button (base size)
`btn-icon-lg`	Add to `.btn` for large square icon button

<button class="btn btn-primary btn-lg">Large Primary</button>
<button class="btn btn-ghost btn-icon" aria-label="Close"><icon-x /></button>