Button Component

Classes: .btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-outline, .btn-ghost, .btn-sm, .btn-lg, .btn-icon, .btn:disabled, .btn.disabled

Features:

• Multiple color and style variants
• Outline and ghost styles
• Disabled state support
• Icon-only and size modifiers
• Uses design tokens for all styles

Example

Usage

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

Ghost Buttons

<button class="btn btn-primary btn-ghost">Primary Ghost</button>
<button class="btn btn-success btn-ghost">Success Ghost</button>
<button class="btn btn-danger btn-ghost">Danger Ghost</button>

Disabled State

Usage

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

Example

Usage:

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

Button Sizes

<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>

Icon Button

<button class="btn btn-primary btn-icon">×</button>
<button class="btn btn-secondary btn-icon">+</button>

Customization:

• Add more color variants by extending variables
• Combine with utility classes for spacing/layout