Add and inspect a Button

The add command resolves a registry item, installs missing dependencies, and writes the component files into your project.

Use the CLI’s view command before add when you want to inspect the resolved official item without writing it. After adding Button, review both the source diff and package diff. Notice how native button props are forwarded, how variants become classes, and how the class-merging helper is used. The exact code depends on the selected base and style, so reading your file is more useful than memorizing one screenshot.

npx shadcn@latest add button

A variant is a semantic promise, not merely a color. Destructive should identify a consequential action, disabled must prevent interaction and expose state, and a pending button needs text or another accessible indication beyond a spinner. Inspect the final DOM: the result should still be a real button unless navigation semantics require a link.

Render the default, secondary, outline, and destructive variants plus disabled and pending examples. Activate each real button with Enter and Space, inspect focus and accessible names, and explain every dependency the command added.