Badge
You might say
Show a little red number on the message icon for how many messages are unread.
Add a count or compact status next to another objectA badge sits beside an icon, tab, or avatar to show a count, short label, or status dot, such as unread messages. Important meaning cannot rely on color alone, and screen readers need a complete description rather than just a number or dot.
You can say this to an AI Agent
Add an unread-count badge to the message entry and expose Messages, 3 unread to assistive technology. Hide the badge at zero, show 99+ above the cap, and verify count changes do not shift the navigation layout.
When to use it
- Unread count512
- New-content markerLAlex ChenOnlineMMaya LeeAway
- Online or offline stateAllAwaiting payment 3Awaiting shipment 12
- Small status attached to an icon or labelL3Alex Chen has 3 new updates
When NOT to use it
- Use a badge as the main contentActive users12,846Revenue¥ 86.4w
- Show a large number that no longer fitsFrontend tasksDesign tasksA red dot means unread, not a category color
- Rely on a colored dot with no accessible text59274If every item has a red dot, nothing stands out as needing attention
- Attach several badges to the same small targetReview declined View reason →
Anatomy
🔔5
The whole badge, usually attached to a related element
The icon, avatar, or text the badge is attached to
A number or red dot; counts above 99 usually display as 99+
Variants
Count
🔔5
When you have a few unread items that you want to explain clearly
Dot
⚙️
When you only need to indicate that there is new content
Status
AM
When an online or offline state should be visible at a glance
Overflow
✉️99+
When the number of unread items exceeds the display upper limit, use the cap number.
Typical use cases
Inbox count
VibeHub
Components
Tutorials
🔔5
✉️99+
Notification icon
Alex ChenOnline
M
Maya LeeAway
Build a botOnline
Online avatar
📦 My Order3
🚚 Awaiting shipment12
⭐ My Collection
New tab
Good Finds
🛒3
Wireless Headphones Pro¥ 299
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check