Badge
Small status label or category indicator
Category: display · WCAG 2.2-AA · label, status, tag
Variants
- default
- secondary
- success
- warning
- destructive
- outline
Sizes
- sm
- md
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline' | default | Selects the visual style variant. |
size | 'sm' | 'md' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
Design tokens
--cascivo-font-sans--cascivo-font-medium--cascivo-radius-badge--cascivo-space-1--cascivo-space-2--cascivo-space-3--cascivo-text-xs--cascivo-leading-normal--cascivo-color-accent--cascivo-color-text-on-accent--cascivo-color-bg-subtle--cascivo-color-text--cascivo-color-border--cascivo-color-border-strong--cascivo-color-success-subtle--cascivo-color-success-foreground--cascivo-color-warning-subtle--cascivo-color-warning-foreground--cascivo-color-destructive-subtle--cascivo-color-destructive-foreground--cascivo-color-primary--cascivo-color-primary-content--cascivo-color-info--cascivo-color-info-content--cascivo-color-error--cascivo-color-error-content
When to use
- Labeling an item with a short, static status or category (e.g. "New", "Beta")
- Annotating an element with a count or state that is not interactive
When not to use
- A removable or interactive chip (filters, selections) — use Tag
- A standalone system state with a colored dot — use Status
How to build an accessible Badge in React →
Examples
Default
<Badge>New</Badge>Success
<Badge variant="success">Active</Badge>Destructive
<Badge variant="destructive">Deprecated</Badge>