Button Variants

Buttons come in different visual styles to indicate hierarchy and importance.

variant="primary"
variant="secondary"
variant="ghost"
variant="outline"

Button Sizes

Three sizes are available to fit different contexts.

Button States

Buttons can be disabled or full-width.

disabled
fullWidth

Button as Link

Pass an href prop to render the button as an anchor element.

Props

Prop Type Default Description
variant 'primary' | 'secondary' | 'ghost' | 'outline' 'primary' Visual style of the button
size 'sm' | 'md' | 'lg' 'md' Button size
href string Renders as anchor element if provided
disabled boolean false Disabled state
fullWidth boolean false Full width button
type 'button' | 'submit' | 'reset' 'button' Button type attribute