Badge
A small mono pill that classifies the thing beside it, like a plan tier.
import Badge from "swshd/Badge";Badge is a small mono pill that classifies the thing beside it — a plan tier, a state. It reads at a glance and never acts.
Don't use it for counts or attention marks — that is Notification.
Seven variants, each a pair of semantic roles from BADGE_TOKENS: neutral, outline and inverse, plus the four tint colors accent / success / warning / danger. The pill is 20 px tall with label-sm mono at sm (24 px, label-md at md).
The organization plan tiers as the sidebar shows them:
Write labels in sentence case; mono renders them uppercase.
import Badge from "swshd/Badge";
import type { BadgeVariant } from "swshd/Badge";
<Badge variant="outline">Starter</Badge>A badge is a text label on the thing it classifies — the row or heading carries the accessible name, and the badge reads as part of the content.
No style prop: the badge is configured through variants.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "neutral" | "outline" | "inverse" | "accent" | "success" | "warning" | "danger" | "neutral" | Which BADGE_TOKENS entry paints the pill. |
size | "sm" | "md" | "sm" | sm is every badge today; md is the card tag. |
Icon | IconComponent | — | Leading glyph in the badge's ink. |
children | string | — | The label, sentence case. |
testID | string | — | data-testid on web. |