Badge
Usage
A short status or count attached to something else — a row, a card header, a nav item. Two emphasis levels: tinted by default, solid when the badge is the thing you are meant to notice.import { Badge } from '@summonware/ui';Best practices
DoKeep the label to one or two words. A badge that wraps is a sentence wearing the wrong component.
DoUse solid sparingly — one per view at most, or the emphasis stops meaning anything.
Don'tUse a badge as a button. It has no hit target, no focus ring and no keyboard affordance.
Don'tEncode status in colour alone. "Overdue" in red still needs to say "Overdue".
Examples
Common configurations, variations and states.Tones
NeutralPrimarySuccessWarningDanger
The tinted default. Quiet enough to sit in a dense table without competing with the row content.
Solid
NewPaidPendingOverdue
Full-strength fill for the one status that should pull the eye — an unpaid invoice, a failed job.
Counts
Inbox 12Flagged 3Archived 128
Badges as numeric indicators next to a label, the shape used in sidebar navigation and tab strips.