Badge

ready

Small count or label pill in danger, brand, and neutral tones.

The Badge is a small rounded pill for counts and short labels — most visibly the notification count on the bell icon.

Variants

Tones

3 New 12 
<Badge tone="danger" label={3} />
<Badge tone="brand" label="New" />
<Badge tone="neutral" label={12} />

On an icon button

<IconButton icon="bell" label="Notifications" badge={3} />

States

3

Danger

Counts needing attention.

New

Brand

Highlights / 'new'.

12

Neutral

Quiet counts.

Usage

✓ Do
9

Use a badge for short counts or one-word labels.

✕ Don't
Pending external review

Don't put long text in a badge — it's a pill, not a chip.

Accessibility

  • A badge is supplementary; ensure the count or label is also conveyed in the control’s accessible name where it matters (e.g. “Notifications, 3 unread”).
  • Don’t rely on color alone to carry meaning.

Content

  • Counts only, or a single short word (“New”, “Beta”).

Props

PropTypeDefaultNotes
labelstring | number—Badge content (or use the default slot).
tone"danger" | "brand" | "neutral""neutral"Color treatment.