Badge
Compact labels for status, category, and metadata. Keep copy short — a word or two.
Examples
Variants
DefaultOutlineDestructive
Overview
Badge is a non-interactive label for status and category. Variants encode meaning — default for neutral metadata, outline for quiet tags, and destructive for risk or errors.
tsx
import { Badge } from "@standard-ui/react" <Badge>New</Badge>
Usage
Variants
Pick the variant by meaning, not decoration. Prefer default or outline when unsure.
| Variant | Use it for |
|---|---|
| default | Neutral metadata — counts, categories, quiet status. |
| outline | Low-emphasis tags on busy surfaces where a fill adds noise. |
| destructive | Risk, error, or negative status — failed, blocked, overdue. |
tsx
<Badge>Draft</Badge> <Badge variant="outline">v2</Badge> <Badge variant="destructive">Failed</Badge>
API
Badge renders a span and accepts standard HTML span attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "outline" | "destructive" | "default" | Visual style of the badge. |
Guidelines
Do
- Keep labels short — one or two words
- Use
destructiveonly for negative or risky status - Place badges next to the entity they describe
Don't
- Don't use badges as buttons — they are not interactive
- Don't stack many badges in one row — it creates visual noise
- Don't use
destructivefor decoration