Badge

A red 3 on the Chats tab. A dot on the bell. Sale −20% on a pair of running shoes. A 12 on your banking app’s icon that won’t go away, no matter how many times you open the app.

Badges are tiny, but they make a promise: “there’s something here for you”. When the promise is wrong (a “0” that should be gone, a count that never updates, a number nobody can hear) users stop trusting it, or they open the app twenty times a day for nothing. Here’s how to test them.

What is a badge?

A badge is a small marker attached to another element (an icon, a tab, an avatar, a card) that adds a bit of status. It doesn’t do anything on its own; tapping the badge is tapping the thing it sits on.

There are three kinds, and it’s worth naming them correctly in bug reports:

Kind	Looks like	Means	Example
Count badge	Small pill with a number	How many new things	Chats 3, cart 2
Dot badge	Small dot, no number	Something new, or a presence state	Dot on the bell, green dot on an avatar
Status label (pill, tag)	Word in a colored pill	A property of the item	New, Sale −20%, Sold out, In transit

Count and dot badges are about attention and change all the time. Status labels describe the item and change with its data. Both are UI stateUI stateHow a component looks and behaves in a given situation: default, hover, pressed, focused, disabled, loading, error.Open in glossary → that has to match the real data behind it.

Anatomy

Designs & variants

Several of these react to taps. Use the switch to compare light and dark.

Dark

3ChatsCalls99+UpdatesSettings

Reset the unread count

Home999+InboxSearch7Profile

shop.example2

Tap the bag to add items (caps at 9+, hides at 0).

• ANOnline
• MKAway
• JSOffline

Trail runner 2Sale −20%

City sneakerNew

Rain jacketSold out

Wool socksOnly 2 left

Order #4821In transit

12iOS

Android dot

No badge

Where badges sit

• On icons in tab bars and navigation bars: the top-right corner of the icon, overlapping it slightly, never covering it. See Navigation Bar and Tabs.
• Inside a tab or list row: a counter next to the label (Inbox 24, Unread 3). Here it’s part of the text, not floating on top.
• On avatars: a presence dot (online, away) in the bottom-right corner, with a ring in the background color so it stands out from the photo.
• On cards and product tiles: a status label in a corner or next to the price, like the “Sold out” label on the Card page.
• On the app icon: drawn by the operating system, not by the app. More on that below.

The rules for counts

When does the count update?

Ask this before you test, because there are two valid designs:

• Realtime: the server pushes changes (a push notificationPush notificationA message an app sends to the device that appears even when the app is closed.Open in glossary →, a websocket) and the badge updates while you look at the screen. Typical for chat.
• On open or refresh: the app fetches counts when it starts, comes back from the background or the user pulls to refresh. Typical for shops and news.

Either way, the badge must be right after every way of reading: opening the item, “Mark all as read”, swiping it away, reading it on the web, and coming back from the background (Background and foreground). And when the user reads something, the badge should drop immediately, without waiting for the next sync.

App icon badges (iOS and Android)

The number or dot on the app icon is drawn by the system, so it follows the system’s rules:

• iOS shows a red number on the icon. The app can only set it if the user allowed notifications with badges; the user can switch badges off per app in Settings › Notifications. The app (or its server, via the push payload) is responsible for setting it back to zero. A stuck icon badge is one of the most common badge bugs.
• Android (8.0 and newer) shows notification dots: a dot appears while the app has active notifications, and long-pressing the icon shows them. Some launchers (Samsung, for example) can show a number instead. The dot disappears when the notifications are dismissed, so test dismissing them, not only opening the app. On Android 13+, notifications need a runtime permission, so no permission means no dot. See Push Notifications.
• Web: installed web apps can set an icon badge where the browser and OS support it. Websites often put the count in the page title instead: (3) Inbox.
  Dev note

  Icon badges use the Badging API (navigator.setAppBadge()).

Push it to the limits

Try the counts testers always try: 0, 1, 99, 100, 1,000 and 12,345. Then shrink the screen, raise the text size and turn off the count in the accessible name.

🧪 Badge stress test

Feed the badge awkward numbers, shrink the screen and make the text huge. Watch the tab bar and what a screen reader would say.

Unread count: 3

01942991001,00012,345

Cap the number at

No cap (show the exact number)9+99+999+

Only matters above the cap: try 100 or 1,000.

Style

iOSmaterialweb

Screen width: 360px

Text size: 100%

Hide at zeroSet the count to 0 to see it.Count in accessible nameDark mode

3ChatsCallsUpdatesShopProfile

VoiceOver: "Chats, 3 unread, tab, 1 of 5"

Real count 3 · badge shows "3"

Looks good. Now try 12,345 with no cap, 0 without hiding, a 260px screen or 200% text.

When to use it

• To show that new or unread things are waiting somewhere else: messages, notifications, order updates.
• To show how many items are in a container the user cares about: cart, downloads queue.
• To show a short status that helps users scan a list: Sale, New, Sold out, Delivered.
• To show presence: online, away, busy.

Good and bad uses

Also avoid badges as decoration (a permanent “NEW” on a feature launched a year ago), badges on everything at once (if every tab has a badge, none stands out), and badges for things the user can’t act on.

Common bugs

#	Bug	What you see	Typical severity
1	Zero shown	A red “0” instead of no badge	Low–Medium
2	No cap	“1000” or “12345” overflows the tab, overlaps the next icon or is cut off	Medium
3	Stale count	Badge doesn’t drop after reading, only after restarting the app	Medium
4	Wrong count	Counts messages instead of chats (or the other way round), counts read items, counts twice	Medium
5	Stuck app icon badge	The icon shows 12 even though everything is read	Medium
6	Count not spoken	Screen reader says “Chats, tab” but not “3 unread”	High (for affected users)
7	Color-only status	Sale and New differ only by red vs green	Medium
8	Badge hides the anchor	With large text or on a small screen the badge covers the icon	Medium
9	Low contrast	Light text on a bright red or a pastel pill; invisible in dark modeDark modeA display setting that uses light text on dark backgrounds.Open in glossary →	Low–Medium
10	Inconsistent counts	Tab says 3, the list shows 2 unread, the app icon says 5	Medium
11	Negative or nonsense values	“-1” after deleting, “NaN”, “undefined”	Medium
12	Localization	“99+” or “Sold out” not translated, or a long word like “Ausverkauft” truncated	Low–Medium

Find the bug

This messenger has six badge bugs. Explore it like a tester:

• Look at every tab’s badge. Then visit each tab and come back.
• Open a few unread chats and go back. Does the Chats badge agree with the list? Try Restart app.
• Turn on Screen reader and tap a tab once to hear it (twice to open it).
• Open Shop and turn on the grayscale color filter.
• Turn on Larger text and look at the tab bar.

🐞 Bug hunt: Messenger badges

This demo has 6 hidden bugs. Explore it like a tester, then check your findings.

Found0/6

9:41

Chats

• ANAna9:32Are we still on for Saturday?2
• FAFamily 🏡9:05Mom: Photos from the weekend5
• MKMarko8:47Sent the invoice1
• LULukaYesterdayThanks, see you!

3Chats2Calls1284ChannelsShopSettings

Device settings

Restart appReset demo

Larger textColor filter: grayscaleScreen reader (VoiceOver captions)

1. 1

   Hint: Open the Calls tab, then go back to Chats and look at the Calls icon.

   Calls shows a red "0" after the missed calls were seen

   Opening Calls sets the missed count to 0, but the badge stays visible with "0". The code checks whether a count exists, not whether it is greater than zero. Expected: the badge disappears at 0.

   Reveal answer✓ I found this
2. 2

   Hint: Look at the Channels tab badge, especially on the right edge of its tab.

   "1284" is not capped and spills over the next tab

   The full number is shown and the pill is wider than the tab, running into the Shop tab. With Larger text it gets worse. Expected: a cap such as 99+ (iOS convention) or 999+ (Material 3), and the badge stays inside its tab.

   Reveal answer✓ I found this
3. 3

   Hint: Open Ana's and Marko's chats, go back, and compare the badge with the list. Then tap Restart app.

   Chats badge doesn't update after reading

   The list shows fewer unread chats, but the badge still says 3. Only after a restart does it drop. The count was calculated once at launch instead of being derived from the unread chats. Expected: the badge updates immediately after each chat is read.

   Reveal answer✓ I found this
4. 4

   Hint: Turn on Screen reader, tap the Chats tab once, then a chat row once.

   Screen reader hears the tab but not the count

   The tab is read as "Chats, selected, tab, 1 of 5". The red 3 is hidden from assistive technology and nothing replaces it. The chat rows do it right ("Ana, 2 unread messages…"). Expected: "Chats, 3 unread, tab, 1 of 5".

   Reveal answer✓ I found this
5. 5

   Hint: Open Shop, read the legend, then turn on the grayscale color filter. Also try the screen reader on a product.

   Sale and New differ only by color

   Products are marked only with a red or green dot. In grayscale (and for many colorblind users) the two dots look the same, and the screen reader says nothing about them. This fails WCAG 1.4.1 Use of Color (Level A). Expected: a text label such as "Sale −20%" or "New", which also ends up in the accessible name.

   Reveal answer✓ I found this
6. 6

   Hint: Turn on Larger text and look at the Chats, Calls and Channels icons.

   With Larger text the badge covers the icon

   To keep the bigger badge inside the narrow tab, the large-text layout moves it onto the icon. Now a red blob hides the chat bubble, phone and bell. Expected: the badge stays at the icon's top-right corner, overlapping only slightly, at every text size.

   Reveal answer✓ I found this

How to test it

Checklist

Badge test checklist

0 of 13 checked

Copy

• The count equals the real number of unread or new items, as defined in the spec (chats vs messages)
• At 0 the badge disappears; it never shows "0", a negative number or "NaN"
• Large counts are capped (99+ or 999+) and the badge stays inside its tab or icon area
• The badge updates immediately after reading, mark all as read, deleting and reading on another device
• The badge is correct after a push notification, after returning from the background and after a restart
• Tab badge, list counts and app icon badge agree with each other
• The app icon badge clears when everything is read (iOS) and the notification dot goes away when notifications are dismissed (Android)
• With badges or notifications turned off in system settings, the app behaves sensibly
• Screen readers announce the count with the element ("Chats, 3 unread"), and the count updates in the name
• Status labels use words (and maybe an icon), not color alone; check with a grayscale filter
• Badge text has at least 4.5:1 contrast, and the badge 3:1 against what is behind it, in light and dark mode
• At the largest text size and on the smallest screen, the badge does not cover its icon or overlap neighbors
• Status labels and "99+" are translated, and long translations fit

Example test cases

Accessibility

• The count belongs in the accessible name. A visual badge is usually hidden from assistive tech, so the element itself must say it: “Chats, 3 unread”, “Cart, 2 items”. This is WCAG 4.1.2 Name, Role, Value (Level A). Test with a screen readerScreen readerSoftware that reads the screen aloud for blind and low-vision users, like VoiceOver or TalkBack.Open in glossary →.
  Dev note

  The badge is hidden with aria-hidden="true". On the web, use aria-label on the button or visually hidden text; on iOS the accessibilityValue or label; on Android the contentDescription or state description.
• Say what’s capped. If the badge shows “99+”, the name can say “more than 99 unread”. Never just “99 plus”.
• Changing counts. Users don’t need every change announced, but if a count change matters (an item added to the cart), a polite announcement helps (WCAG 4.1.3 Status Messages, Level AA). See ARIAARIAHTML attributes that tell assistive technology what custom elements are and what state they're in.Open in glossary →.
• Not color alone. Status labels need text; presence dots need a text equivalent (“Ana, online”). WCAG 1.4.1 Use of Color (Level A).
• Contrast. The number in the badge needs 4.5:1 against the badge color, and the badge 3:1 against what’s behind it (WCAG 1.4.3 / 1.4.11). White on a bright red often lands around 3.5:1, so measure it with a contrast ratioContrast ratioHow different text and background colors are; WCAG asks for at least 4.5:1 for normal text.Open in glossary → checker, in light and in dark mode.
• Text size. At the largest Dynamic TypeDynamic TypeThe phone setting that lets users make text bigger or smaller across apps.Open in glossary → or font scale, the badge must stay readable and must not hide its icon or the neighbor.
• Touch targetsTouch targetThe area of the screen that responds to a tap, which should be large enough for a finger.Open in glossary →. The badge isn’t a separate target; the element it sits on is, and it needs at least 44×44 pt on iOS and 48×48 dp on Android. On the web, WCAG 2.5.8 (AA) asks for at least 24×24 CSS px; 44×44 px (2.5.5, AAA) is the comfortable target.

Mobile vs web

iOSAndroidWeb

• Tab bar badges: red pill with white text by default.
  Dev note

  badgeValue on UITabBarItem (a string; "0" shows a zero) or .badge() in SwiftUI.
• App icon badges need notification permission with badges. Test: allow, deny, and turning Badges off later in Settings › Notifications.
• Push payloads can set the icon badge. Check it’s correct after a push arrives while the app is closed, and that it clears when the app is opened and the items are read.
• Test with VoiceOver and the largest Dynamic Type size (long-press a tab bar item to see the large content viewer).

• Material 3 badges: a 6 dp dot or a 16 dp badge with up to four characters (“999+”).
  Dev note

  Badge / BadgedBox (Compose) or BadgeDrawable (Views).
• App icons show notification dots on most launchers; the dot follows the app’s active notifications. Test dismissing notifications, and the Notification dot setting in system settings.
• Android 13+ asks for notification permission; without it there are no notifications and no dots (App permissions).
• Test with TalkBack, a large font size and display size, and on a narrow phone in landscape.

• Badges are usually custom <span>s. Check the button’s accessible name in DevTools’ Accessibility pane: does it include the count?
• The page title count (3) Inbox and installed web apps’ icon badges (where supported) must match the in-page badge.
  Dev note

  Icon badges are set with navigator.setAppBadge().
• Test at 200% zoom and narrow viewports: header badges often overlap the logo or the next icon (Responsive design testing).
• Check realtime updates in two browser tabs: read in one, watch the other.

Check your understanding

Quick quiz

0/5 answered · 0 correct

1. 1.All messages have been read. What should the Chats tab badge show?

   A"0"BNothing, the badge disappearsCA grey dotDThe total number of chats

2. 2.There are 1,284 unread updates. What is the usual way to display that on a tab bar icon?

   A1284B1.2kC99+ (iOS convention) or 999+ (Material 3)DA question mark

3. 3.VoiceOver says "Chats, tab, 1 of 5" while the badge shows 3. What is wrong?

   ANothing, the badge is visibleBThe count is missing from the accessible nameCVoiceOver is brokenDThe badge color is wrong

4. 4.A shop marks sale items with a red dot and new items with a green dot. What do you report?

   ANothingBColor-only status: add text labels like "Sale" and "New"CThe dots are too smallDRed should mean new

5. 5.The badge drops only after restarting the app. Which test found it?

   AReading items and watching the badge without restartingBChecking the badge colorCRotating the deviceDChanging the language

Key takeaways

• Three kinds: count badges, dot badges and status labels. Name them correctly in bug reports.
• Zero hides the badge, big numbers are capped (99+, 999+), and the badge stays inside its space without hiding the icon.
• The count is data: it must match the list, update immediately when items are read, and agree with the app icon badge.
• App icon badges belong to the OS: on iOS they need notification permission with badges; on Android they’re usually dots tied to active notifications.
• Accessibility: the count goes into the accessible name (“Chats, 3 unread”), status uses words, not only color, and contrast is checked in light and dark mode.