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-destructive">Destructive</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-link">Link</button>Sizes
Use different sizes to fit various contexts and layouts.
<button class="btn btn-outline btn-sm">Small</button>
<button class="btn btn-outline">Base</button>
<button class="btn btn-outline btn-lg">Large</button>
<button class="btn btn-outline btn-icon-lg" aria-label="Add item">
<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 12h14"></path><path d="M12 5v14"></path></svg>
</button>
<button class="btn btn-outline btn-icon" aria-label="Add item">
<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 12h14"></path><path d="M12 5v14"></path></svg>
</button>
<button class="btn btn-outline btn-icon-sm" aria-label="Add item">
<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 12h14"></path><path d="M12 5v14"></path></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-outline btn-icon" aria-label="More options">
<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><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
</button>
<button class="btn btn-outline"><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="M12 15V3"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><path d="m7 10 5 5 5-5"></path></svg> Export</button>
<button class="btn btn-outline">Open <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="m6 9 6 6 6-6"></path></svg></button>
<button class="btn btn-ghost btn-icon" aria-label="Close">
<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="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
</button>Disabled
Disable buttons to prevent interaction, such as while processing a request.
<button class="btn btn-outline" disabled>
<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" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg> Processing
</button>Button group
Group related buttons together with horizontal or vertical layouts using .btn-group.
<div class="btn-group">
<button class="btn btn-outline">Left</button>
<button class="btn btn-outline">Center</button>
<button class="btn btn-outline">Right</button>
</div>Button group sizes
Button groups work with all button sizes.
<div class="flex flex-col gap-4">
<div class="btn-group">
<button class="btn btn-outline btn-sm">Left</button>
<button class="btn btn-outline btn-sm">Center</button>
<button class="btn btn-outline btn-sm">Right</button>
</div>
<div class="btn-group">
<button class="btn btn-outline">Left</button>
<button class="btn btn-outline">Center</button>
<button class="btn btn-outline">Right</button>
</div>
<div class="btn-group">
<button class="btn btn-outline btn-lg">Left</button>
<button class="btn btn-outline btn-lg">Center</button>
<button class="btn btn-outline btn-lg">Right</button>
</div>
</div>Vertical button group
Stack buttons vertically using btn-group-vertical.
<div class="btn-group btn-group-vertical">
<button class="btn btn-outline btn-icon" aria-label="Increase">
<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 12h14"></path><path d="M12 5v14"></path></svg>
</button>
<button class="btn btn-outline btn-icon" aria-label="Decrease">
<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 12h14"></path></svg>
</button>
</div>Button group with separator
Add visual separation between buttons using btn-group-separator. This is recommended for variants without borders like btn-secondary to improve visual hierarchy.
<div class="btn-group">
<button class="btn btn-secondary">Save</button>
<div class="btn-group-separator"></div>
<button class="btn btn-secondary btn-icon" aria-label="More options">
<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="m6 9 6 6 6-6"></path></svg>
</button>
</div>Button group with text addon
Use btn-group-text for non-interactive text labels.
https://
<div class="btn-group">
<span class="btn-group-text">https://</span>
<input class="input" placeholder="example.com" />
</div>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">Button</button>Buttons can also be links:
<a href="#" class="btn">Link Button</a>Button groups use .btn-group as a container:
<div class="btn-group">
<button class="btn btn-outline">Left</button>
<button class="btn btn-outline">Right</button>
</div>Class reference
All available classes for the button component.
| Class | Description |
|---|---|
btn | Add to <button> or <a> element to apply base button styles |
btn-default | Add to .btn for primary filled style (default) |
btn-destructive | Add to .btn for red destructive/danger style |
btn-outline | Add to .btn for outlined style with transparent background |
btn-secondary | Add to .btn for secondary muted style |
btn-ghost | Add to .btn for transparent style with hover background |
btn-link | Add to .btn for link style with underline on hover |
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-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 |
btn-group | Container for grouping buttons together |
btn-group-horizontal | Horizontal layout for button group (default) |
btn-group-vertical | Vertical layout for button group |
btn-group-text | Text addon element for button groups |
btn-group-separator | Visual separator between grouped buttons |
<button class="btn btn-outline btn-lg">Large Outline</button>
<button class="btn btn-ghost btn-icon" aria-label="Close"><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="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button>