Buttonshadcn
Triggers an action. One primary button per view.
Actions- Install
- npx shadcn add button
- Import from
- @/components/ui/button
- Guidance
- draft · v0.1.0
Examples
As installed from shadcn – rendering in jsp-ds tokens through the bridge.
Guidance
When to use
- To do something: save, submit, create, confirm, open a dialog.
- One default (primary) button per view or section. Everything else is outline, secondary or ghost.
When not to use
- To go somewhere – use a link. If it must look like a button, use
<Button asChild><Link …/></Button>. - For a dangerous action without a confirmation – pair it with an Alert dialog.
Choosing a variant
| Variant | Use for |
|---|---|
default |
The main action of the view |
outline |
Secondary actions beside it – Cancel, Back, Save draft |
secondary |
Medium emphasis when several actions weigh the same |
ghost |
Low emphasis in toolbars, menus and dense rows |
link |
An action that reads as part of a sentence |
destructive |
Delete, remove, revoke – after confirmation |
Writing the label
- Start with a verb and say what happens: Publish, Save draft, Delete project – not OK or Submit.
- Sentence case, no full stop, two or three words.
Accessibility
- An icon-only button needs an
aria-label, and a Tooltip with the same words. - While loading, keep the button in place, disable it and set
aria-busy="true"; keep the label (Saving). - Never remove the focus ring.
Spec
The variables this component reads, and the jsp-ds token behind each, resolved live. Switch mode to see them change.
| Token | CSS variable | Value now |
|---|---|---|
| color.action.primary.backgroundDefault fill | --primary | … |
| color.action.primary.textDefault label | --primary-foreground | … |
| color.action.tertiary.backgroundSecondary fill (D5) | --secondary | … |
| color.action.ghost.background-hoverGhost and outline hover | --accent | … |
| color.action.destructive.text | --destructive | … |
| color.focus.ring | --ring | … |
| radius.mdshadcn's control radius | --radius-md | … |
Install
Terminal
npx shadcn add buttonImport
import { Button } from "@/components/ui/button"From shadcn’s own registry. Don’t edit the installed file – jsp-ds styles it through the bridge, and fixes go in styles/overrides.css with an issue.