# 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.

Page: https://www.appetiteui.com/glossary/badge. Badge on iOS and Material 3: dot, number and status pill. Also called Notification badge, Counter, Status pill.

## 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.

## iOS and Android

|  | iOS | Android (Material 3) | 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

1. [Apple Human Interface Guidelines: Tab bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars)
2. [Material Design 3: Badges](https://m3.material.io/components/badges/overview)
3. [Material Components for Android: Badge](https://github.com/material-components/material-components-android/blob/master/docs/components/BadgeDrawable.md)

## Related

- Docs: [Badge](https://www.appetiteui.com/docs/badge)
- Docs: [Avatar](https://www.appetiteui.com/docs/avatar)
- Glossary: [Tab bar](https://www.appetiteui.com/glossary/tab-bar)
- Glossary: [Chip](https://www.appetiteui.com/glossary/chip)
- Glossary: [List row](https://www.appetiteui.com/glossary#list-row)