Badge
A component for displaying badges.
Default
Secondary
Destructive
Usage Examples
Basic Usage
Use badges to highlight status or categories
<Badge>New</Badge>
Badge Variants
Different styles for different contexts
<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
Props
Name
Type
Default
Description
variant
'default' | 'secondary' | 'destructive' | 'outline'
default
The visual style of the badge