Use concise markers like beta, deprecated, new.
Badge
Compact status marker for lifecycle, intent, and short counters.
Stage: Beta
State: Deprecated
Version: v2
Design
Backend
Data
Mobile
- .source-badge Root badge element
- data-palette Color intent — semantic (`neutral`, `accent`, `success`, `warning`, `danger`, `info`) or categorical (`blue`, `green`, `red`, `orange`, `yellow`, `pink`, `purple`, `teal`)
- data-variant Visual style (`subtle`, `solid`, `outline`)
States
VariantBehavior
subtleTinted background and readable palette color for low-emphasis status.
solidFilled marker for high emphasis states.
outlineTransparent background with border for dense UIs.
Design intent
Badge answers the question 'what is this?' at a glance. It is purely informational and non-interactive. The moment the user needs to act on the information it carries, reach for a Button or Chip instead. Keep it short, one or two words, and pick a palette that reflects the actual severity.
Example labels
The examples are semantic placeholders: Beta for release stage, Deprecated for lifecycle state, and v2 for compact version markers.
When to use
Do
Prefer solid for high-priority states.
Limit labels to one or two words.
Don't
Do not use Badge as an interactive filter control.
Avoid full sentences inside badges.
Never rely on color alone for critical semantics.
Semantic palettes
Neutral
Accent
Success
Warning
Danger
Info
Categorical palettes
Use these when color is a category signal rather than a status signal — for instance, color-coded labels in a kanban board or topic tags in a list. All eight work with the three variants.
Blue
Green
Red
Orange
Yellow
Pink
Purple
Teal
Blue
Green
Red
Orange
Yellow
Pink
Purple
Teal
Designer checklist
- Palette reflects actual severity, not decoration.
- Status is conveyed by text, not color alone.
- Badge is not placed inside a focusable element unless the whole element is the call to action.
- Label is one or two words maximum.
Props
PropTypeDefaultDescription
childrenReactNoderequiredBadge label.
palette`neutral \| accent \| success \| warning \| danger \| info \| blue \| green \| red \| orange \| yellow \| pink \| purple \| teal`neutralSemantic or categorical color. Semantic values carry implied meaning; categorical values are for visual differentiation without status semantics.
tonesame as `palette`nullDeprecated alias kept for backward compatibility.
variant`subtle \| solid \| outline`subtleVisual weight.
classNamestringnullExtra class on root.
Usage
import '@pierredelattre/source-tokens';
import '@pierredelattre/source-react/styles';
import { Badge } from '@pierredelattre/source-react';
Beta
Deprecated
v2 Component tokens
TokenDefault
--badge-bg--color-surface-raised
--badge-color--color-text-secondary
--badge-border-color--color-border
--badge-padding-x0.375rem
--badge-padding-y0.125rem
--badge-font-size0.6875rem
--badge-radius--radius-full
Accessibility
Badge is non-interactive (`span`). If a status is critical, pair visual color with explicit text. Do not rely on color only.