Badge
displayCompact label component for status indicators, tags, and counts. Supports a pulsing "live" animation variant.
import { Badge } from '@/components/forge'Preview
Badge
DefaultSuccessWarningDangerLive
Code Example
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
variant | 'default' | 'success' | 'warning' | 'danger' | 'accent' | 'default' | No | Color variant |
dot | boolean | false | No | Shows a colored dot indicator |
pulse | boolean | false | No | Animates the dot with a pulsing effect for live status |
Variants
defaultsuccesswarningdangeraccent
Accessibility
- Use aria-label on the parent when badge content alone is not descriptive
- Pulse animation respects prefers-reduced-motion