Button Components

Primary Button

Primary Action Disabled Primary

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

Secondary Button

Secondary Action Disabled Secondary

<button class="btn btn-secondary">Secondary Action</button>
<button class="btn btn-secondary" disabled>Disabled</button>

Icon Button

🔍 ⚙️ ✕ ☰

<button class="btn btn-icon" aria-label="Search">🔍</button>
<button class="btn btn-icon" aria-label="Settings">⚙️</button>

Button with Icon

⬇ Download 🔗 Share

<button class="btn btn-primary">
    <span style="margin-right: var(--space-2);">⬇</span>
    Download
</button>

Button Group

Left Center Right

<div class="btn-group">
    <button class="btn btn-secondary">Left</button>
    <button class="btn btn-secondary">Center</button>
    <button class="btn btn-secondary">Right</button>
</div>

Button Sizes

Small Medium (Default) Large

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

Link Button

Link as Button Secondary Link

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