Forms & input
Button
Triggers an action or event. Six emphasis levels from primary to link, four sizes, leading/trailing icons, and loading and disabled states — all themeable across presets and modes.
npx shadcn@latest add @orbit/buttonPlayground
Variants
Pick by emphasis, not by looks.
Sizes
xs 24px · sm 28px · md 32px (default) · lg 38px. Interactive controls keep a 44px minimum hit target in touch contexts via spacing.
States
Loading swaps the leading icon for a spinner and blocks interaction while keeping width stable. Disabled drops to a flat neutral treatment.
Icon-only
Square buttons for toolbars and dense rows. Always pass an aria-label so screen readers and tooltips have a name.
Full width
Stretches to the container — dialogs, forms, and mobile layouts.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "tinted" | "ghost" | "destructive" | "link" | "primary" | Emphasis level. |
| size | "xs" | "sm" | "md" | "lg" | "md" | Control height: 24 / 28 / 32 / 38px. |
| iconLeft | ReactNode | — | Icon before the label. Replaced by a spinner while loading. |
| iconRight | ReactNode | — | Icon after the label. Stays visible while loading. |
| iconOnly | boolean | false | Square icon button — pass the icon as children and set aria-label. |
| loading | boolean | false | Shows a spinner, sets aria-busy, and blocks pointer interaction. |
| disabled | boolean | false | Native disabled state. |
| fullWidth | boolean | false | Stretch to fill the container. |
| …rest | ButtonHTMLAttributes | — | Everything else is forwarded to the native <button>, including ref. |
Usage
One primary action per view
Make the single most likely next step obvious; everything else is secondary or ghost.
Stack two primaries together
Competing high-emphasis buttons leave people unsure which to choose.
Use verb-first, 1–2 word labels
“Create task”, “Export”, “Delete project” — the label alone should say what happens.
Ship icon-only with no label
Always pass an aria-label so screen readers and tooltips have a name.
Keyboard & accessibility
Native <button> semantics. Tab moves focus, Enter and Space activate, aria-busy is set while loading, and the 3px focus ring uses the themed --ring token.