Button
A button component with different styles, variants, and sizes.
Installation
npx shadcn-ui@latest add buttonUsage
import { Button } from "@/components/ui/button"
export default function Example() {
return (
<Button>Click me</Button>
)
}Examples
Button Variants
The Button component comes with several variants:
<Button>Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>Button Sizes
The Button component supports different sizes:
<Button size="lg">Large</Button>
<Button size="default">Default</Button>
<Button size="sm">Small</Button>
<Button size="icon">
<PlusIcon className="h-4 w-4" />
</Button>Props
The Button component accepts the following props:
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | `“default" | "destructive" | "outline" |
| size | `“default" | "sm" | "lg" |
| asChild | boolean | false | Whether to render as a child component |