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-danger">Danger</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-ghost">Ghost</button>

Example

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-info btn-outline">Info</button>
<button class="btn btn-ghost btn-outline">Ghost</button>

Customization:

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