Buttons
A button component that can be used to trigger an action or event. It can have different styles and sizes. It can have different styles and sizes.
Usage Examples
Basic Usage
Use the Button component for user interactions
<Button>Click me</Button>Button Variants
Different styles for different purposes
<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>Button Sizes
Available in different sizes
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>With Icons
Combine with icons for better visual hierarchy
<Button>
<Check className="mr-2 h-4 w-4" /> Accept
</Button>
<Button variant="destructive">
<X className="mr-2 h-4 w-4" /> Decline
</Button>Props
Name
Type
Default
Description
variant
'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
-
The visual style of the button
size
'default' | 'sm' | 'lg' | 'icon'
-
The size of the button
asChild
boolean
-
Whether to render as a child component