Button
Primary action control with solid, outline, and ghost styles plus loading states.
Live preview
Basic
tsx
Loading
tsx
API
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "solid" | "ghost" | "outline" | "solid" | Visual treatment for emphasis. |
| size | "sm" | "md" | "lg" | "md" | Padding and type scale. |
| state | "default" | "loading" | "default" | Loading shows spinner and disables interaction. |
| loadingIndicator | "text" | "spinner" | "spinner-text" | "spinner-text" | How loading state is communicated. |
| asChild | boolean | false | Merge styles onto a child element via Radix Slot. |
| className | string | — | Additional class names merged with component styles. |
Accessibility
Native button element; loading state should be announced to assistive tech.