Buttons
Interactive button components with 6 variants, 5 sizes, loading states, and icon support.
Variants
Buttons come in 6 variants to communicate different levels of emphasis and intent.
Sizes
Five size options from extra-small to extra-large for different contexts.
With Icons
Buttons can include icons on the left, right, or both sides for added visual context.
Icon Buttons
Icon-only buttons for compact actions. Each requires an aria-label for accessibility.
Loading State
Buttons can display a loading indicator to signal an in-progress action.
Disabled State
Disabled buttons indicate that an action is currently unavailable.
Full Width
Buttons can stretch to fill the full width of their container.
Button Groups
ButtonGroup arranges buttons horizontally or vertically, with optional joined styling.
Horizontal group:
Vertical group:
Joined buttons (spacing="none"):
As Link
Buttons can render as anchor elements for navigation while retaining button styling.