Button
Variants and Colors
Buttons come in different variants and colors to suit different purposes. Each variant can be combined with any color and size.
Default
primary
secondary
minimal
destructive
icon
primary
secondary
minimal
destructive
Icons
Buttons can include icons at the start or end. The icon color and size are automatically handled by the button component.
Start Icon
End Icon
Loading State
Buttons can show a loading state to indicate an ongoing action. The loading spinner replaces the button text while maintaining the button's width.
Loading State
Loading with Icons
Disabled State
Buttons can be disabled to indicate that they are not interactive. The disabled state is visually distinct and prevents any click events.
Disabled State
Disabled with Icons
onClick Events
Buttons handle click events like any other button component. You can provide an onClick handler to respond to user interactions.
Providing a loading state will add a spinner on the left side of the button.
Loading State
Loading with Icons
Disabled
Disabled State
Disabled with Icons
Button Groups
Buttons can be grouped together using the ButtonGroup component. The ButtonGroup component can be used to create a group of related buttons with consistent spacing and optional combined borders.