Displays a button or a component that looks like a button.
import { Button } from "@/components/ui/button";
export function ButtonDemo() {
return (
<div className="flex flex-wrap items-center gap-3">
<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="link">Link</Button>
</div>
);
}
pnpm dlx shadcn@latest add https://shadcn-registry-docs-template.pages.dev/r/button.jsonimport { Button } from "@/components/ui/button"<Button>Click me</Button>The Button component accepts all props from @base-ui-components/react Button plus the following:
| Prop | Type | Default |
|---|---|---|
| variant | "default" | "secondary" | "outline" | "ghost" | "destructive" | "link" | "default" |
| size | "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" |