Badge
Two families on one Badge component, picked by boolean props, both Dark Factory's pill. The metadata badge labels a schema, role, or tag (tones: secondary, the quiet surface pill and the default; default, the solid call-to-action pill; outline, a hairline pill; destructive, the soft red pill; add mono for token names). The status badge (status) is Dark Factory's live-state pill for state like active, pending, or failed: a quiet pill whose leading dot carries the tone (success, warning, error, info, neutral) beside a label in the foreground.
The tone colors come from statusColors, the helper every toned surface in the kit reads, so a warning badge and a warning alert are the same state.
If more than one tone is passed, Badge resolves the highest-precedence one: default > destructive > secondary > outline for metadata (secondary when none is passed), and success > error > warning > info > neutral for status (neutral when none is passed).
Lay out a series of badges with BadgeGroup, a wrapping row that owns the gap (tight / snug / cozy, default snug; the largest gap passed wins: cozy > snug > tight) and centers its badges, so a call site never hand-rolls a flex row around them. Give it an accessibilityLabel (say, "Rachel Chen's roles") and it is announced as a named group that keeps its badges' text; without one it is a plain row.
admin
iOS
admin
Android
admin
Web
tsx
Default
Solid
Outline
Destructive
Mono (token / event names)
Status
Status tones
Group
Props
Badge
BadgeGroup
Do & Don’t
Grouping
Don’t
Hand-rolling a flex row for a badge series re-invents the gap and wrap and drifts from the kit's spacing scale.
Do
employee
engineering
remote
Reach for BadgeGroup to lay out a series of badges; it owns the wrap, the gap, and the vertical centering.
Metadata badge
Don’t
Borrowing status colors for plain metadata reads as severity that isn't there; a red tag looks like an error.
Do
employee
engineering
remote
active
Neutral tags for metadata; reserve color and the status-badge dot for live state.
Status badge
Don’t
A bare colored dot isn't a label and fails for color-blind users.
Do
Failed
Always pair the dot with a word: active, pending, failed.
Identity row
Don’t
A wall of badges after a name buries the one that matters.
Do
Rachel Chen
active
employee
Show only the one or two badges relevant to this view.
Token / code badge
Don’t
Proportional type makes identifiers hard to scan and compare.
Do
authorization_code
refresh_token
client_credentials
Use the mono variant for tokens, scopes, and event names.
Default variant
Don’t
The solid call-to-action fill is the loudest badge; using it for every tag makes the whole row shout and nothing leads.
Do
admin
engineering
remote
Reserve the default fill for the single tag you want noticed first; keep the rest secondary.
Secondary variant
Don’t
A muted gray pill reads as static metadata, so live state shown as a secondary badge looks inert and goes unnoticed.
Do
employee
engineering
active
Keep secondary for static metadata (role, team) and switch to the status-badge for anything live.
Outline variant
Don’t
The thin border is the whole badge; on a colored or busy surface it disappears and the label floats unboxed.
Do
draft
internal
Use outline on a plain surface where the quiet border has contrast, for low-priority secondary tags.
Destructive variant
Don’t
Solid red signals error or danger, so using it to color-code neutral categories raises a false alarm.
Do
Revoked
Banned
marketing
Reserve destructive for genuinely destructive or error semantics like revoked or banned.