Badge
A small pill for metadata. Categories, status, counts. Never used for emphasis — if something needs attention, the typography or spacing should carry it.
Workshop
Usage#
- Badges describe, they don't alert. For alerts, use a toast (not yet built) or inline helper text.
- Keep them short. Under 20 characters. “Organic cotton”, not “Made from 100% certified organic cotton”.
- Don't stack five. Two badges max per item. More than that and the UI reads cluttered.
Props#
| Name | Type | Default | Description |
|---|---|---|---|
| tone | "neutral" | "teal" | "success" | "warn" | "err" | "neutral" | Semantic color. Use sparingly — badges are for metadata, not emphasis. |
| children* | ReactNode | — | Badge text. Keep under 20 characters. |
Code#
tsx
<Badge>Workshop</Badge>
<Badge tone="teal">Family-owned</Badge>
<Badge tone="success">In stock</Badge>