Badge
A badge is a small mark on an item that says something is new or counts it, as a dot or a number. iOS puts it on a tab or a list row and Material 3 has small and large badges.
Why it matters
A badge asks for attention, so one on every item stops working. Apple asks to reserve badges for critical information, such as new or updated content in a section.
A number needs a limit, or the badge outgrows the icon it sits on.
Badge on iOS and Android
Also called Notification badge, Counter, Status pill. The same idea in each system, with the values Appetite UI gives it.
| Value | iOS | Android | Appetite UI |
|---|---|---|---|
| Name | Badge, on a tab item or a list row | Badge: small dot or large with a number | Badge |
| Form | Red oval with white text, a number or an exclamation point | Small dot, or large badge with a number or text | See below |
| Number limit (Material Components) | Set by the app | maxNumber and maxCharacterCount attributes | See below |
In Appetite UI
Badge is a Circle at 20 by 20 and a Pill at 24 high on every platform. Pill with Dot adds a leading dot and a Soft style so a status word reads without a filled block, and Overlay is a label over photography.
Example
The Messages tab shows a badge with 3. At 100 or more it reads 99+, so the badge never grows past the tab icon.
Common mistakes
- A badge on every tab. Reserve it for what needs attention.
- Showing a long number. Cap it.
- Using color alone for a status. Add a word or an icon.
- Leaving a badge on after the thing is seen.
Questions
What is a badge on iOS?
A red oval with a number or an exclamation point on a tab or a list row, meaning there is new or updated content. Apple says to reserve it for information that needs attention.
What is the difference between a small and a large badge in Material 3?
A small badge is a dot with no content that only signals something is new. A large badge carries a number or short text.
Sources
The pages the facts above rest on, each read October 30, 2026.