Badge

Atom
Two families on one Badge component, picked by boolean props. The metadata badge labels a schema, role, or tag: with no tone it is the accent's soft pill, and the tones give default the solid call-to-action pill, secondary the quiet surface pill, outline a hairline pill and destructive the soft red pill; add mono for token names. A status tone (success, warning, error, info, neutral) paints the pill in that tone's wash and ink and leads it with a dot. The status badge (status) has no pill: a dot in the tone's color, ringed in its wash, beside a muted label, for live state like active, pending, or failed.
src/atoms/badge
View in Controls

Playground

Every control sets a real prop of BadgeProps. The JSX below updates as you go.
New
Props
children
string
Tone
pick one
Status
pick one
dot
boolean
mono
boolean
small
boolean
uppercase
boolean
JSX · BadgeProps
<Badge>New</Badge>

Variants

9 examples from src/atoms/badge/badge.md, each rendered live from its own JSX.
3
Notification count
<Badge notification solid action>3</Badge>
admin
Solid
<Badge default>admin</Badge>
admin
Outline
<Badge outline>admin</Badge>
admin
Destructive
<Badge destructive>admin</Badge>
refresh_token
Mono (token / event names)
<Badge mono>refresh_token</Badge>
pending
Status
<Badge status>pending</Badge>
active
degraded
failed
syncing
archived
Status tones
<BadgeGroup>
<Badge status success>active</Badge>
<Badge status warning>degraded</Badge>
<Badge status error>failed</Badge>
<Badge status info>syncing</Badge>
<Badge status neutral>archived</Badge>
</BadgeGroup>
employee
engineering
active
Group
<BadgeGroup>
<Badge>employee</Badge>
<Badge>engineering</Badge>
<Badge status success>active</Badge>
</BadgeGroup>
CORE-1842
Reference link
<Badge reference href="https://example.com">CORE-1842</Badge>

Sizes

New
small
New
default
New
large

Anatomy

Operational
1
Container
2
Status dot
3
Label
Dimmed parts appear only in some states or variants.

Props

46 props on BadgeProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
1 prop
children
ReactNode
–
Family
28 props
status
boolean
false
soft
boolean
false
Soft intent fill with matching ink (every toned pill is soft; kept for the intent grammar).
solid
boolean
false
action
boolean
false
primary
boolean
false
inverse
boolean
false
neutralFill
boolean
false
Neutral border-colored fill.
foreground
boolean
false
Foreground ink on the quiet surface.
small
boolean
false
The small pill: 18 px tall, 11 px label.
tiny
boolean
false
The tiny pill: 18 px tall under a 10 px label on the pill's own 18 px line, at the regular weight even when solid (a navigation row's "New" tag beside its count).
count
boolean
false
A count at the small size with the heavier label.
navigationCount
boolean
false
Solid count used in navigation.
notification
boolean
false
Compact counter carried by a notification control.
reference
boolean
false
A linked reference key at the key corner, in the code face.
token
boolean
false
A code token chip: the 22 px pill with its 8 px inset under the small 11 px label in the code face, for a role, a state or an attribute name beside its term.
large
boolean
false
The large pill: 26 px tall.
marker
boolean
false
An anatomy figure's numbered marker: a 22 px disc on the accent with its number in the code face, set off from the stage by a ring of the stage's fill and a shadow (Component.dc.html line 220).
disc
boolean
false
A legend's numbered disc: the marker's 22 px disc with its number in the code face, in the tone axis's fill (the solid accent as default, the quiet surface as secondary) with no ring and no shadow (Component.dc.html line 222, the anatomy legend's part numbers).
tier
boolean
false
A tier pill (Atom, Molecule, Organism beside a page title): 24 px tall with a 10 px inset and a 500 11 px label on its own line (Component.dc.html line 139), tracked in caps with uppercase and in the code face with mono, as the page sets it.
band
boolean
false
A group band's pill (the props table's "pick one" beside an axis's title): 20 px tall with a 7 px inset and a 500 11 px label (Component.dc.html line 237), in the code face with mono as the page sets it, in the tone axis's fill (the accent's soft pill with none). It sits between tier and small in precedence.
tick
boolean
false
A ruler tick's pill (the Layout page's "this window" readout under its marker): 20 px tall with an 8 px inset and a 500 10 px label in the code face on the pill's own 20 px line, with no border and no tone dot. Usually with contrast. After band in precedence.
step
boolean
false
A numbered step mark (the Layout page's "try in this order" list): a 32 px square at the step mark's corner with its number 600 13 px in the code face, centred. In the tone axis's fill: default the solid accent with its glow, none the accent's soft wash, secondary the quiet surface inside the field-border edge in the second ink. Pass it as a MediaObject's icon with bareIcon. After disc in precedence.
keyCorners
boolean
false
The key cap's corner in place of the round pill's, on any size: the sizing legend's mode tags and the primitive names under a Grid (Layout.dc.html). The corner axis has this one member; reference and step keep their own corners.
dot
boolean
false
Show the intent dot without switching to the status family. With no children it is the bare 8 px dot in the tone's ink, with no pill (a marker beside text that names it).
signal
boolean
false
Standalone 10px signal marker, retaining its status label.
start
boolean
false
Pin to the start when embedded in an unmeasured host layout.
uppercase
boolean
false

Accessibility and keyboard

Keyboard
Not focusable. It has no interaction of its own and takes the semantics of what it wraps.
Semantics
Roles
group
image
img
link
ARIA on web
aria-hidden
aria-label
From the docs
Lay out a series of badges with BadgeGroup, a wrapping row that owns the gap (tight 4 / compact 6 / snug 8 / cozy 12, default compact, the hand-off's 6; the largest gap passed wins: cozy > snug > compact > 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.
signal is the original standalone 10px status marker. It uses the existing status-tone precedence and announces its supplied status label.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
pick one
stacks
Web
control 10 · field 10 · card 16 · Instrument Sans
pick one
stacks
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
pick one
stacks
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Badge>admin</Badge>
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, and every ink is the solved text role that keeps 4.5:1 on its wash.
contrast is the most prominent neutral: the scheme's ink (foreground) as the fill under the page colour as the label (under glass, the ink at the dense alpha, as the Tooltip bubble's). dashed is the placeholder outline: no fill inside a dashed field-border edge, the label in the second ink.
If more than one tone is passed, Badge resolves the highest-precedence one: default > contrast > destructive > secondary > outline > dashed for metadata (the accent's soft pill when none is passed), and success > error > warning > info > neutral for status (neutral when none is passed). The metadata tones win over a status tone's colors; the status tone's dot stays.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--ft
--ion-soft
--ion-tx

Related components