Badges are used to highlight status, labels, or counts. They support multiple variants, sizes, and can include status dots or be used for numeric indicators.
Import
import { Badge } from '@/components/ui/Badge';
Usage
Basic Badge
<Badge>Default Badge</Badge>
Variants
Badge supports seven different variants for different contexts:
<Badge variant="default">Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="outline">Outline</Badge>
Sizes
Three sizes are available:
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>
With Status Dot
Add a status indicator dot to your badge:
<Badge dot variant="success">Online</Badge>
<Badge dot variant="warning">Away</Badge>
<Badge dot variant="danger">Offline</Badge>
<Badge dot variant="secondary">Invisible</Badge>
<Badge dot dotColor="#ff6b6b">Custom Color</Badge>
Numeric Badges
Use numeric badges for notification counts:
<Badge numeric variant="danger">5</Badge>
<Badge numeric variant="primary">12</Badge>
<Badge numeric variant="success">99+</Badge>
<div className="relative">
<button className="px-4 py-2 bg-secondary rounded">
Messages
</button>
<Badge
numeric
variant="danger"
size="sm"
className="absolute -top-2 -right-2"
>
12
</Badge>
</div>
Examples
User Status
<div className="flex gap-2">
<Badge dot variant="success">Online</Badge>
<Badge dot variant="warning">Away</Badge>
<Badge dot variant="danger">Offline</Badge>
<Badge dot variant="secondary">Invisible</Badge>
</div>
Order Status
<div className="flex gap-2">
<Badge variant="primary">New</Badge>
<Badge variant="warning">Processing</Badge>
<Badge variant="success">Shipped</Badge>
<Badge variant="outline">Delivered</Badge>
</div>
Priority Levels
<div className="flex gap-2">
<Badge variant="danger" size="sm">High</Badge>
<Badge variant="warning" size="sm">Medium</Badge>
<Badge variant="success" size="sm">Low</Badge>
</div>
Props
The visual style variant. Options: default, primary, secondary, success, warning, danger, outline.
The size of the badge. Options: sm, md, lg.
Whether to display a status indicator dot before the badge text.
Custom color for the status dot. Accepts any valid CSS color value.
Whether the badge is a numeric indicator (makes it circular and centers content).
Additional CSS classes to apply to the badge.
The content to display inside the badge.
Semantic Tokens
Badge uses the following semantic tokens from the Stride Design System:
--bg-secondary, --bg-brand-muted, --bg-tertiary--text-primary, --text-brand, --text-secondary--border-primary, --border-brand-muted, --border-secondary--status-success, --status-warning, --status-danger (and their -bg and -text variants)--badge-height-sm, --badge-height-md, --badge-height-lg--font-size-xs, --font-size-sm, --font-size-md--transition-normal, --font-weight-medium
Accessibility
- Badge is rendered as a
<span> element with semantic styling
- Status dots use background colors that correspond to their variants
- All color combinations meet WCAG contrast requirements
- Numeric badges maintain minimum touch target size when interactive