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.

🔔5 ✉️99+ Lin

Quick checkChoose the best answer

The top message entry has three unread messages. It must stay compact and expose the full state to screen-reader users. How should it appear?

Add a navigation statistic card that reads Total unread messages: 3Show only a red dot on the message icon with no number or textAttach a numeric badge to the message entry and expose 3 unread messages accessibly

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 count
🔔5✉12
New-content marker
LAlex ChenOnline
MMaya LeeAway
Online or offline state
AllAwaiting payment 3Awaiting shipment 12
Small status attached to an icon or label
L3Alex Chen has 3 new updates

When NOT to use it

Use a badge as the main content
Active users12,846
Revenue¥ 86.4w
Show a large number that no longer fits
Frontend tasks
Design tasks
A red dot means unread, not a category color
Rely on a colored dot with no accessible text
🔔5✉9⚙2★7☰4
If every item has a red dot, nothing stands out as needing attention
Attach several badges to the same small target
Review 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

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

Want GPT or Codex?VibeHubGPT support

GPT-6 Astra

Build in 3D. Put your computer to work.