Buttons

Color variants, sizes, icons, disabled states, and button groups. Compose with .btn + a variant class.

All color variants

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-ghost">Ghost</button>

Sizes — .btn-sm / default / .btn-lg / .btn-full

<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-full">Full width</button>

With icon

<button class="btn btn-primary">
  <svg class="h-4 w-4">...</svg>
  Add item
</button>

Icon-only — .btn-icon + button color variants

<button class="btn-icon btn-primary">
  <svg class="h-5 w-5">...</svg>
</button>
<button class="btn-icon btn-secondary">
  <svg class="h-5 w-5">...</svg>
</button>

Disabled state

<button class="btn btn-primary" disabled>Disabled</button>

Glass & White — for colored backgrounds

<button class="btn btn-glass">Glass</button>
<button class="btn btn-white">White</button>

Button Group

Segmented controls for navigation, selectors, or pagination.

Year selector pattern

2026

<div class="btn-group">
  <button class="btn-group-item"><svg ...></svg></button>
  <span class="btn-group-label">2026</span>
  <button class="btn-group-item"><svg ...></svg></button>
</div>

With active state — .btn-group-item-active

<div class="btn-group">
  <button class="btn-group-item btn-group-item-active">Day</button>
  <button class="btn-group-item">Week</button>
  <button class="btn-group-item">Month</button>
  <button class="btn-group-item">Year</button>
</div>