Highly interactive button component with support for multiple variants, sizes, and states.
npx canx-ui add buttonimport { Button } from "@/components/ui/button";
export default function Demo() {
return (
<div className="flex flex-wrap gap-4">
<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
</div>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "default" | Use the "default", "destructive", "outline", "secondary", "ghost", or "link" variant. |
| size | "default" | "sm" | "lg" | "icon" | "default" | Use "default", "sm", "lg", or "icon" sizes. |
| asChild | boolean | false | Merge props onto the immediate child. |