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

When to use it

Unread count
New-content marker
Online or offline state
Small status attached to an icon or label

When NOT to use it

Use a badge as the main content
Show a large number that no longer fits
Rely on a colored dot with no accessible text
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