Badge

A compact label for displaying status, category, or metadata. Supports semantic color variants for clear visual communication.

Variants

Default
Secondary
Destructive
Outline
Success
Warning
Error
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>

In Context

Deployment v2.4.1
Live
Deployed to production 3 minutes ago.
Deployment v2.4.0
Rolling back
Rollback initiated due to elevated error rate.
<Card>
  <CardHeader>
    <div className="flex items-center justify-between">
      <CardTitle>Deployment v2.4.1</CardTitle>
      <Badge variant="success">Live</Badge>
    </div>
    <CardDescription>
      Deployed to production 3 minutes ago.
    </CardDescription>
  </CardHeader>
</Card>

<Card>
  <CardHeader>
    <div className="flex items-center justify-between">
      <CardTitle>Deployment v2.4.0</CardTitle>
      <Badge variant="warning">Rolling back</Badge>
    </div>
    <CardDescription>
      Rollback initiated due to elevated error rate.
    </CardDescription>
  </CardHeader>
</Card>

API Reference

PropTypeDefaultDescription
variant"default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "error""default"The visual style of the badge. Each variant uses a distinct color scheme suited to its semantic meaning.
classNamestring—Additional CSS classes to apply to the badge element.

Accessibility

Don't rely on color alone to communicate status. Badge variants have distinct colors, but users with color vision deficiency or monochrome displays will not distinguish them. Pair status badges with an icon or explicit text so the meaning is carried by more than hue.

Active
Pending
Failed
<Badge variant="success"><Check /> Active</Badge>
<Badge variant="secondary"><Clock /> Pending</Badge>
<Badge variant="destructive"><X /> Failed</Badge>