Badge

Small label for status, count or category. Supports custom background colors.

Examples

Variants

DefaultSecondaryDestructiveOutline

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>

Custom color

Override with backgroundColor + custom text style.

Custom green Premium

<Badge backgroundColor="#16a34a" style={{ color: '#fff' }}>Custom green</Badge>
<Badge backgroundColor="#9333ea" style={{ color: '#fff' }}>
  <Crown size={12} className="inline mr-1" /> Premium
</Badge>

API Reference

Props of the Badge component.

Prop	Type	Default	Description
`variant`	`'default' \| 'secondary' \| 'destructive' \| 'outline'`	`'default'`	—
`backgroundColor`	`string`	—	Custom background color (overrides variant).
`className`	`string`	—	—