Button
Displays a button or a component that looks like a button.
TESTING COMPONENT
Do not install this component. This is only for testing purposes.
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>
);
}
Installation
Usage
import { Button } from "@/components/ui/button"<Button>Click me</Button>Reference
Props
The Button component accepts all props from radix-ui 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" |