components · form

Button

Triggers an action or event

preview

variants

default

bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2

variant="default"

secondary

bg-secondary text-secondary-foreground hover:bg-secondary/80 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2

variant="secondary"

outline

border border-input bg-background hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2

variant="outline"

destructive

bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2

variant="destructive"

sizes

h-8 px-3 text-xs

size="sm"

h-9 px-4 text-sm

size="md"

h-10 px-6 text-base

size="lg"

usage

<Button variant="default">Click me</Button>

props

prop	type	default
variant	"default" \| "secondary" \| "outline" \| "destructive"	"default"
size	"sm" \| "md" \| "lg"	"sm"
className	string	undefined