Actions
Button
Triggers an action or event, such as submitting a form or opening a dialog. Pick a variant to signal how important or risky the action is.
Registry itemInstallation
pnpm dlx shadcn@latest add https://structured.glass/r/button.jsonUsage
import { Button } from "@/components/ui/button"<div className="kit-row">
<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="destructive">Delete</Button>
</div>Examples
Default
The main variants: default, secondary, outline and destructive, set with the variant prop.
Ghost and link
Low-emphasis actions use variant ghost or variant link, which drop the frame and shadow.
Sizes
The size prop accepts sm, default, lg and icon; icon-only buttons need an aria-label.
With icon
Place an icon before the label as a child and the button spaces it automatically.
Disabled
The native disabled attribute dims the button and blocks pointer events.
Loading
Swap the icon for a Spinner and set disabled while the action is in flight.
