Badge

Badge is a compact status or categorization label for counts, states, and small metadata.

Overview

Badge styling is concentrated in one compact surface with size, appearance, and semantic variant variables.

Public CSS Variables

Active

Beta

Variable	Value	Affects
Height and minimum width.`Badge`		No visible change in this state
Text size.`Badge`		No visible change in this state
Background color.`Badge`		No visible change in this state
Outline color.`Badge`		No visible change in this state
Text color.`Badge`		No visible change in this state
Chroma added to the accent color in the tinted background.`Badge`		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Badge: owns the entire badge surface.

State And Variant Interaction

size changes height and font size.
appearance changes fill, surface, outline, or ghost treatment.
variant changes the semantic color family.

Examples

.compactBadge {
  --badge-size: 18px;
}

.brandBadge {
  --badge-border-radius-ratio: 0.5;
}

Do Not Override

Do not stretch the badge into a paragraph container.
Do not rely on color alone to carry meaning.
Do not invent custom variants without matching styles.