Button
Clickable button with multiple variants and sizes. Supports icons, loading states, and keyboard accessibility.
Variants
Different button styles for different purposes.
Sizes
Buttons come in three sizes: small, medium (default), and large.
With Icons
Icons can be placed before or after the button text.
Icon Only
Square buttons with just an icon (requires aria-label for accessibility).
States
Buttons have different visual states.
Active State Toggle
The active state can be toggled programmatically.
Click to toggle active state
Loading State
Shows a spinner and disables interaction while loading.
Full Width
Button can expand to fill its container.
Variant & Size Matrix
All combinations of variants and sizes.
Accessibility
Button accessibility features.
Keyboard
- Enter or Space - Activate button
- Tab - Move focus to next element
- Shift + Tab - Move focus to previous element
ARIA
- aria-label - Required for icon-only buttons
- aria-busy - Set automatically when loading
- aria-pressed - Indicates active state
- aria-describedby - Link to description element