Button Showcase
Explore different button variants and styles
Buttons are the most fundamental UI element. shadcn/ui provides a versatile <Button> component with multiple variants and sizes.
Variants
button Variants
live demoSizes
button Sizes
live demoIcon Buttons
button Icons
live demoCode Usage
import { Button } from "@/components/ui/button"
// Default
<Button>Default</Button>
// Variants
<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>
// Sizes
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon">
<ChevronRight className="h-4 w-4" />
</Button>
Best Practices
- Use one primary action per section
- Destructive buttons need clear confirmation
- Icon buttons need
aria-labelfor accessibility - Keep button text short and actionable
- Use
asChildprop for link buttons with<Link>