Button
Trigger actions and navigation. Six variants, five sizes, loading state, and icon slots.
Installation
Variants
Solid
Default high-emphasis button for primary actions.
Outline
Bordered button for secondary actions.
Ghost
Minimal button for low-emphasis actions.
Soft
Tinted background for subtle emphasis.
Sizes
All sizes
xs, sm, md (default), lg, xl
States
Loading
Spinner replaces or accompanies the label while an async action is pending.
With icons
Use leftIcon or rightIcon slots for any SVG or icon component.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "solid"|"outline"|"ghost"|"soft"|"link" | "solid" | Visual style of the button. |
| size | "xs"|"sm"|"md"|"lg"|"xl" | "md" | Controls padding and font size. |
| color | "primary"|"success"|"warning"|"danger"|"neutral" | "primary" | Color scheme applied to the variant. |
| loading | boolean | false | Shows a spinner and disables the button. |
| loadingText | string | undefined | Label shown while loading. |
| leftIcon | ReactNode | undefined | Icon rendered before the label. |
| rightIcon | ReactNode | undefined | Icon rendered after the label. |
| disabled | boolean | false | Prevents interaction. |
| asChild | boolean | false | Merges props onto the child element (Radix asChild pattern). |