Button Component
Complete button system with variants, sizes, states, and icon support.
Basic Buttons
The fundamental button styles for your UI.
<button class="btn">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-ghost">Ghost Button</button>
Button Variants
Different button styles for different purposes.
/* Primary (default) */
<button class="btn">Primary Button</button>
/* Secondary variant */
<button class="btn btn-secondary">Secondary Button</button>
/* Ghost variant */
<button class="btn btn-ghost">Ghost Button</button>
Button Sizes
Adjust button size based on context and hierarchy.
<button class="btn btn-sm">Small Button</button>
<button class="btn">Normal Button</button>
<button class="btn btn-lg">Large Button</button>
<button class="btn btn-block">Full Width Button</button>
Button States
Different states for user interaction.
/* Default state (automatically applied) */
<button class="btn">Default</button>
/* Disabled state */
<button class="btn" disabled>Disabled</button>
/* Loading state */
<button class="btn" disabled>
<i class="fas fa-spinner fa-spin"></i> Loading...
</button>
/* Active state */
<button class="btn" aria-pressed="true">Active</button>
Buttons with Icons
Buttons can include icons for better visual communication.
Icon + Text
Heart Icon
Share Icon
Icon Only (Small)
Delete Action
Confirm (Large)
<!-- Icon with text -->
<button class="btn">
<i class="fas fa-download"></i> Download
</button>
<!-- Icon only (needs aria-label) -->
<button class="btn btn-sm" aria-label="Add item">
<i class="fas fa-plus"></i>
</button>
<!-- Icon after text -->
<button class="btn">
Delete <i class="fas fa-trash"></i>
</button>
Button Groups
Multiple buttons arranged together for related actions.
<!-- Compact button group -->
<div style="display: flex; gap: var(--spacing-sm);">
<button class="btn btn-sm">Left</button>
<button class="btn btn-sm">Middle</button>
<button class="btn btn-sm">Right</button>
</div>
<!-- Form button group -->
<div style="display: flex; gap: var(--spacing-md);">
<button class="btn">Save</button>
<button class="btn btn-secondary">Cancel</button>
</div>
Accessibility
Best practices for accessible button implementations.
<!-- Good: Semantic button element -->
<button class="btn">Click me</button>
<!-- Good: Clear, descriptive text -->
<button class="btn">Delete Account</button>
<!-- Good: Icon button with label -->
<button class="btn" aria-label="Close menu">
<i class="fas fa-times"></i>
</button>
<!-- Good: Disabled button clearly marked -->
<button class="btn" disabled aria-disabled="true">
Disabled Action
</button>
<!-- Bad: Div acting as button -->
<div onclick="..." role="button">Click me</div>
<!-- Bad: No visible text -->
<button class="btn">
<i class="fas fa-arrow-right"></i>
</button>
Customization via Variables
Override button styles using CSS variables.
/* Default button colors */
:root {
--accent: #d94f90;
--accent-light: #e86ca8;
--accent-dark: #b61b70;
--text: #f5f1f8;
}
/* Override for your brand */
:root {
--accent: #3b82f6; /* Blue instead of pink */
--accent-light: #60a5fa;
--accent-dark: #1e40af;
}
/* Override button padding */
:root {
--spacing-md: 1.25rem;
--spacing-lg: 2rem;
}
/* Change border radius */
:root {
--radius-lg: 12px;
}