Badge

Stable

Displays a small visual indicator for status, counts, or categories.

Examples

Variants

Primary
Secondary
Neon
Destructive
tsx
<div className="flex gap-4">
  <Badge variant="primary">Primary</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="neon">Neon</Badge>
  <Badge variant="destructive">Destructive</Badge>
</div>

With Icons

Active
tsx
<Badge variant="neon"><Activity className="w-3 h-3 mr-1" /> Active</Badge>

API Reference

PropertyDescriptionTypeDefault
variantThe visual style of the badge."primary" | "secondary" | "neon" | "destructive" | "outline""primary"