Components

Badge

A small label for a status, a category or a count. It is not clickable.

DesignerDeveloper

Playground

Badge

ToneSizeText Filled Disabled Leading icon Trailing icon

Figma variant

💅 Style=Primary
👕 Size=Medium
Disabled=False
Filled=False
Icon Leading=False
Icon Trailing=False

Seven tones, each as an outline (the default) or filled. Disabled turns any badge grey.

DefaultPrimarySecondaryTertiaryErrorSuccessWarning

DisabledDisabled

Medium and Small use the body text; Tiny and Micro the small text. Micro is a compact 20px pill.

MediumSmallTinyMicro

Size	Height	Padding	Gap	Text	Icon
medium	40px	`--space-tiny --space-medium`	`--space-tiny`	ui/text/regular	16px
small	32px	`--space-micro --space-small`	`--space-tiny`	ui/text/regular	16px
tiny	24px	`--space-micro --space-tiny`	`--space-micro`	ui/text small/regular	12px
micro	20px	`--space-atom (+ --space-micro text)`	0	ui/text small/regular	10px

Tone	Outline line / text	Filled background / text
default	`--color-surface-level-4 / --color-foreground-high-emphasis`	`--color-foreground-high-emphasis / --color-foreground-level-2`
primary	`--color-primary / --color-primary`	`--color-primary / --color-on-primary`
secondary	`--color-secondary / --color-on-secondary`	`--color-secondary / --color-on-secondary`
tertiary	`--color-tertiary / --color-on-tertiary`	`--color-tertiary / --color-on-tertiary`
error	`--color-error / --color-error`	`--color-error / --color-on-error`
success	`--color-success / --color-success`	`--color-success / --color-on-success`
warning	`--color-warning / --color-warning`	`--color-warning / --color-on-warning`
disabled	`--color-surface-level-3 / --color-foreground-low-emphasis`	`—`

--badge-radius · --color-surface-level-1 (outline background)

Outline Secondary and Tertiary use their on-color for the text (on-secondary, on-tertiary), the other tones use the tone itself.
Disabled exists only for the Default style; code applies it to every tone.
Micro outline badges have no fill, and the Default Micro outline uses foreground/ghost-emphasis instead of surface/level-4.
Warning Micro filled uses primary/on-primary for the text; code uses on-warning like the other sizes.

Figma	React
💅 Style = Default / Primary / Secondary / Tertiary / Error / Success / Warning	`tone='default' / 'primary' / … / 'warning'`
👕 Size = Medium / Small / Tiny / Micro	`size='medium' / 'small' / 'tiny' / 'micro'`
Filled = True	`filled`
Disabled = True	`disabled`
Icon Leading / Icon Trailing	`iconLeft={<Icon… />} / iconRight={<Icon… />}`