Component Variants

Explore the different variants and styles available for each component.

Button Variants

Buttons come in different variants to suit your needs:

Button Sizes

Badge Variants

Badges can be used to show status or highlight information:

DefaultSecondaryOutlineDestructive

Using Variants

You can specify variants and sizes through props:

// Button with variant and size
<Button variant="outline" size="lg">
  Large Outline Button
</Button>

// Badge with variant
<Badge variant="destructive">
  Status
</Badge>