Buttons
Button components for interactive actions throughout the application.
Button Variants
Different variants serve different purposes: primary for main actions, secondary for alternatives, outline/ghost for subtle actions, and destructive for dangerous operations.
Button Sizes
Choose the size that best fits your layout and hierarchy. Medium is the default.
With Icons
Icons can be added to buttons to provide visual context for the action.
Icon Buttons
Small
ghost
Medium (default)
ghost
Large
ghost
Small
outline
Medium (default)
outline
Large
outline
Icon buttons come in three sizes. Add radius="full" for circular buttons.
Disabled State
Disabled buttons indicate that an action is currently unavailable.
Border Radius
Buttons support different border radius options for various design contexts.
Link Mode
Link mode buttons look like text links but maintain button semantics.