General
Button
A versatile button component with multiple variants, sizes, and states for all interaction needs.
Variants
Different visual styles for various primary and secondary actions.
Sizes
Choose from different sizes to match your interface density.
sm
default
lg
icon
Props
| Prop | Type | Default |
|---|---|---|
variant | "default" | "secondary" | "outline" | "destructive" | "ghost" | "link" | "default" |
size | "default" | "sm" | "lg" | "icon" | "default" |
asChild | boolean | false |
Usage
import { Button } from '@/components/ui/button';
// Primary action
<Button>Continue</Button>
// Secondary outline button
<Button variant="outline">Cancel</Badge>