Badge
/BAJ/ · noun · FEEDBACK pattern · #066
A tiny count or dot pinned to an icon, whispering "something's waiting for you in here." Loses all power the day it's always on.
Also called: notification badge, notification dot, red dot.
You might call it
- “the red dot notification”
- “the notification number on an app icon”
- “the little red circle with a number”
- “the unread count”
- “the new message dot”
…its name is Badge.
Common questions
What is the red dot on an app icon called?
A badge (also called a notification badge or notification dot) — a small count or dot pinned to an icon to signal that something is waiting inside.
What do notification dots mean?
A dot on an app icon means the app has unread notifications or something new to look at. Android calls it a notification dot; iOS calls it a badge, which can also show a count.
In code
| SwiftUI | .badge() |
|---|---|
| UIKit | UITabBarItem.badgeValue |
| Jetpack Compose | BadgedBox Badge |
| Android (Views) | BadgeDrawable |
| Flutter | Badge |
| Web (HTML) | No native element — a small positioned <span>, with the count in the accessible name |
Prompt for your AI coding tool
Add a badge to this icon: a small red circle at its top-right corner showing the unread count, capped at “99+”, or a plain dot when only “something new” matters. Hide it when the count is zero, keep it from covering the icon’s shape, and include the count in the icon’s accessible name (for example “Messages, 3 unread”) so it is not conveyed by colour alone.
More UI words to use when vibe coding →