Button
Clickable actions in multiple styles and sizes.
Selectors
.btn-filled- Primary solid background button.
.btn-gray- Secondary gray background button.
.btn-tinted- Translucent primary-tinted button.
.btn-bezelled- Outlined button with border.
.btn-plain- Text-only button with hover background.
.btn-small- Small button size.
.btn-large- Large button size.
.btn-capsule- Fully rounded pill shape.
.btn-destructive- Destructive color modifier for any variant.
Variants
<div class="grid grid-cols-5 gap-3 justify-items-center">
<button class="btn-filled">Filled</button>
<button class="btn-gray">Gray</button>
<button class="btn-tinted">Tinted</button>
<button class="btn-bezelled">Bordered</button>
<button class="btn-plain">Plain</button>
<button class="btn-filled" disabled>Filled</button>
<button class="btn-gray" disabled>Gray</button>
<button class="btn-tinted" disabled>Tinted</button>
<button class="btn-bezelled" disabled>Bordered</button>
<button class="btn-plain" disabled>Plain</button>
</div>Sizes
<div class="flex items-center gap-3">
<button class="btn-filled btn-small">Small</button>
<button class="btn-filled">Default</button>
<button class="btn-filled btn-large">Large</button>
</div>
Use btn-capsule for CTA and marketing contexts.
Capsule
<div class="flex flex-wrap gap-3">
<button class="btn-filled btn-capsule">Get Started</button>
<button class="btn-gray btn-capsule">Learn More</button>
<button class="btn-tinted btn-capsule">Watch Video</button>
<button class="btn-bezelled btn-capsule">Subscribe</button>
<button class="btn-plain btn-capsule">Cancel</button>
</div>
Use btn-destructive as a modifier with any variant.
Destructive
<div class="flex flex-wrap gap-3">
<button class="btn-filled btn-destructive">Filled</button>
<button class="btn-gray btn-destructive">Gray</button>
<button class="btn-tinted btn-destructive">Tinted</button>
<button class="btn-bezelled btn-destructive">Bordered</button>
<button class="btn-plain btn-destructive">Plain</button>
</div>Full Width
<div class="max-w-xs space-y-3">
<button class="btn-filled w-full">Sign In</button>
<button class="btn-gray w-full">
<svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
Sign in with iPhone
</button>
</div>
Use btn-plain with size-11 and p-0 for icon-only buttons.
Icon Only
<button class="btn-plain size-11 p-0" aria-label="Add">
<svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
</button>
<button class="btn-plain size-11 p-0" aria-label="Mail">
<svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3m18 0-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 8m18 0v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8"/></svg>
</button>
<button class="btn-plain size-11 p-0" aria-label="Close">
<svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
</button>With Icon
<button class="btn-filled">
<svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
Login with Email
</button>
<button class="btn-tinted">
<svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
GitHub
</button>