Loading...
Loading...
The Button component is a versatile interactive element with multiple variants, sizes, and states. Perfect for actions, navigation, and user interactions throughout the site.
import { Button } from '@/components/ui/button';
// Basic usage
<Button>Click me</Button>
// Variants
<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="destructive">Destructive</Button>
// Sizes
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
// With icons
<Button>
<Download className="mr-2" />
Download
</Button>
// Icon only
<Button size="icon">
<Heart />
</Button>
// Disabled
<Button disabled>Disabled</Button>