Button

Clickable element for actions. Use .btn as base class with optional modifiers.

Variants

<button class="btn">Default</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-ghost">Ghost</button>

Sizes

<button class="btn btn-sm">Small</button>
<button class="btn">Medium</button>
<button class="btn btn-lg">Large</button>

Disabled

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

Class Reference

Class Description
.btn Base button — primary background
.btn-outline Transparent background with primary border
.btn-ghost Transparent, shows muted hover bg
.btn-sm Smaller padding and font size
.btn-lg Larger padding and font size