Components · Status

Badge Number

A number badge is a round badge with a number or a check mark.

Every example on this page is the real component. Figma: Number.

Playground

Choose breakpoint, size and content: a number or a check mark. Mobile and Desktop force the breakpoint values whatever the window width; Window follows the window.

Breakpoint
Size
Content

Markup for this selection

HTML




Overview
A number badge is a round badge with a number or a check mark. Although all badges with text can work as a counter, use Number for most cases.
A short summary lives here; the three pages are: Examples & Guidelines (this page), Specifications and Code.




Usage
When to use
  • Show a count, such as unread messages or steps.
  • Number the items of a list or the parts of a figure (the numbered anatomy markers on these pages).
  • Mark a step as done with the check mark.
When not to use
  • For a status in words: use Basic.
  • For the cart counter in the header: that is the counter .badge.
  • For long numbers: more digits make the badge wider; keep it to two or three.
Quick reference
The element…Use
counts something or numbers a stepNumber
shows a status in wordsBasic
marks a change without textDot
counts on the header cart iconThe counter .badge
Do
  • Keep the number short.
  • Say what the number counts, in text next to it.
  • Use Medium or Large on mobile.
Don’t
  • Make a number badge clickable.
  • Use it for a word.
  • Let the number stand without context.




Anatomy
  1. Circle. Black (surface-100), round for one digit, wider for more. Large 24px, Medium 20px, Small 16px on desktop; 20, 18 and 14px on mobile.
  2. Number. Breuer Condensed Bold, uppercase, white. One to three digits.
  3. Check mark. Replaces the number. 20px on Large, 14px on Medium, 11px (10px mobile) on Small.




Variants
Every size has a number or a check mark.
1 1 1
  
Large, Medium and Small, with a number (top) and a check mark (bottom).




Sizes
Three sizes. Mobile and desktop have different diameters; the values are on the Specifications page.
SizeDesktopMobileCheck mark
Large24px20px20px
Medium20px18px14px
Small16px14px11px desktop · 10px mobile




Layout & Appearance
More digits
The badge is round for one digit and grows with the number. It never shrinks below its diameter.
1 12 99 100
1, 12, 99 and 100.




Accessibility
A number badge is text. All requirements are listed under Accessibility Requirements in Specifications.
Screen reader support
The number is read as it is. Give it context: put the count in the label of the item it belongs to (“Messages, 3 new”) or in visually hidden text.
Not interactive
A number badge is never a link or a button.







References