Small visual indicator for status, tags, and labels.
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "destructive" | "outline" | "info" | "success" | "warning" | default | Badge style variant |
| size | "sm" | "md" | md | Badge size |
| before | React.ReactElement<React.SVGProps<SVGSVGElement>> | — | SVG icon to display before the badge content |
| after | React.ReactElement<React.SVGProps<SVGSVGElement>> | — | SVG icon to display after the badge content |
| dot | boolean | — | Display a dot indicator before the content |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Background | color.primary | var(--primary) | Primary background | |
| Text | color.primary-foreground | var(--primary-foreground) | Contrasting text |
Semantic variants for different message types.
<Badge variant="default">Default</Badge> <Badge variant="secondary">Secondary</Badge> <Badge variant="outline">Outline</Badge> <Badge variant="info">Info</Badge> <Badge variant="success">Success</Badge> <Badge variant="warning">Warning</Badge> <Badge variant="destructive">Destructive</Badge>
Available size variants.
<Badge size="sm">Small</Badge> <Badge size="md">Medium</Badge>
Badges with status dot for online/offline states.
<Badge variant="success" dot>Online</Badge> <Badge variant="warning" dot>Away</Badge> <Badge variant="destructive" dot>Offline</Badge> <Badge variant="secondary" dot>Idle</Badge>
Badges with leading or trailing icons using before/after props.
import { Check, Warning, X } from '@phosphor-icons/react';
<Badge variant="success" before={<Check weight="bold" />}>
Verified
</Badge>
<Badge variant="warning" before={<Warning weight="bold" />}>
Review
</Badge>
<Badge variant="destructive" before={<X weight="bold" />}>
Error
</Badge>Common status patterns for system states.
<Badge variant="success">Active</Badge> <Badge variant="info">Processing</Badge> <Badge variant="warning">Pending</Badge> <Badge variant="destructive">Failed</Badge> <Badge variant="secondary">Draft</Badge> <Badge variant="outline">Archived</Badge>
Outline badges work well for tags and categories.
<Badge variant="outline">React</Badge> <Badge variant="outline">TypeScript</Badge> <Badge variant="outline">Tailwind</Badge>
Examples showing this component in realistic usage scenarios.
Badge in a card header to show status.
Last deployed 2 hours ago
Badges in a list of service statuses.
Small badge positioned as a notification indicator.