Button
Starts an action. Six variants and four sizes, with icon, loading and disabled states.
Preview
Installation
It's already in this Base. In another project, add it with the shadcn CLI, then switch its cn import to @/lib/utils, its icons to @/components/icons, and its text-sm and text-xs to text-ui-s and text-ui-xs.
npx shadcn@latest add buttonExamples
Variants
One default button per view; the rest step down.
Sizes
Default in forms and pages, small in dense rows and toolbars.
With an icon
An icon before or after the label; data-icon sets the spacing on that side.
Loading
A spinner and a present-tense label while the action runs. Disabled until it's done.
Disabled
Dimmed and out of the tab order. Say why nearby when it isn't obvious.
Props
The ones that change how it looks or behaves. The rest are the Radix primitive's, in its API.
| Prop | Type | Default |
|---|---|---|
| variant | "default" | "secondary" | "outline" | "ghost" | "destructive" | "link" | "default" |
| size | "xs" | "sm" | "default" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" |
| asChild | boolean | false |
Guidelines
Use it
- One primary button per view. Everything else is secondary, outline or ghost.
- A verb for the label: Save, Invite, Delete draft.
- asChild with a Link when the button goes somewhere.
Don't
- Put two dark buttons side by side.
- Use a button for a text link inside a sentence.
Used in
The screens in this Base that show it, found in the code.
- A deck
- Home
- Kickoff workshop: founder's view
- Prototypes hub
- Settings: Account
- Settings: People
- Settings: Process
- Settings: Projects
- Sign in
- The app shell, on every screen
Accessibility
- Enter and Space press it.
- An icon-only button needs an aria-label, and a tooltip with the same words.
- Disabled buttons can't be focused; say why the action isn't available next to it.