Button
Trigger actions, submit forms, and navigate. Supports multiple variants, sizes, loading states, and icon slots.
Playground
Label
variant
size
loading
disabled
rounded
<Button>
Click me
</Button>Variants
Six visual styles to match different UI contexts.
Sizes
Three sizes to fit different layout densities.
With Icons
Use leftIcon and rightIcon to add icons alongside the label.
Loading
Set loading to show a spinner and disable the button automatically.
Disabled
Visually muted and non-interactive.
Icon Only
Square button for icon-only actions. Use iconOnly to hide the text.
Outline Variants
Outline buttons with color overrides.
API
| Property | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "danger" | "warning" | "outline" | "ghost" | "primary" | Visual style variant of the button |
size | "sm" | "md" | "lg" | "md" | Size preset |
loading | boolean | false | Show loading spinner and disable interaction |
disabled | boolean | false | Disable the button |
iconOnly | boolean | false | Square button for icon only — hides children text |
leftIcon | ReactNode | — | Icon rendered before the label |
rightIcon | ReactNode | — | Icon rendered after the label |
color | "danger" | "warning" | "secondary" | — | Color override for the outline variant |
onClick | (e: MouseEvent) => void | — | Click handler |