Buttons
Button components with various variants, sizes, and states.
Variants
Different button styles for various use cases
Default
<Button variant="default">Button</Button>Secondary
<Button variant="secondary">Button</Button>Outline
<Button variant="outline">Button</Button>Ghost
<Button variant="ghost">Button</Button>Destructive
<Button variant="destructive">Button</Button>Sizes
Different button sizes for various contexts
Small
<Button size="sm">Default
<Button>Large
<Button size="lg">Icon
<Button size="icon">With Icons
Buttons with leading or trailing icons
<Button><Mail className="w-4 h-4 mr-2" />Send Email</Button>Button Groups
Grouped buttons for related actions
<div className="flex gap-2">...</div>Button Guidelines
Default: Use for primary actions. There should typically be only one primary button per section.
Secondary: Use for secondary actions that are less important than the primary action.
Outline: Use for tertiary actions or when you need a button with less visual weight.
Ghost: Use for actions that should be subtle, like in toolbars or navigation.
Destructive: Use for dangerous actions like delete or remove. Always confirm destructive actions.