Primitive · CLI
Button
Primary action control with variants and sizes.
Preview
npx shadcn@latest add @atroui/buttonInstallation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/buttonSource lands in your repo. Installation · Registry
Usage
Use for the primary action in a view. Keep one default (filled) button per surface; put secondary actions on outline or ghost. Reach for destructive only when the click removes data.
tsx
import { Button } from "@/components/ui/button"
<Button>Continue</Button>
<Button variant="outline" size="sm">Cancel</Button>With icon
Mark the icon with data-icon="inline-start" or "inline-end" so the button tightens padding on that side.
Icon only
Square icon sizes drop the label, so always pass an aria-label.
Try it
Flip variant, size, and disabled with knobs.
variantsize
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link' | 'default' | Visual style. |
| size | 'default' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg' | 'default' | Control size, including square icon sizes. |
| disabled | boolean | false | Disables the button. |
| asChild | boolean | false | Render as child (e.g. Next.js Link) via Slot. |
Button