Badge
角标
A tiny marker pinned to the corner of an icon or avatar that says "there is something you need to look at".
Live Demo
Actually clickableWhat you just saw:The unread dot on a WeChat bottom tab, the "99+" on an app icon, the number on the Messages icon in a nav bar.
What it actually is
A badge is metadata about metadata: it carries no content of its own, it just attaches a state to some element. The two most common forms are the dot (unread) and the count (unread total). Overuse it and you get badge fatigue, where users stop seeing any of them.
Anatomy · What it's made of
Anchor宿主元素
The icon or avatar it attaches to
Bubble角标
Absolutely positioned at the top-right
Count数量
Shows 99+ past 99
Dot纯红点
Plain dot with no number, just means "something is here"
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Signalling unread content or new messages | Yes |
| You need attention but not immediate action | Yes |
| Marking a state on the top-right of an icon | Yes |
| Showing a quantity (3 items in the cart) | Yes |
| Signalling a normal or healthy state | No |
Once red dots are everywhere users ignore all of them — use them sparingly.
A "99+" badge without a real number leaves users wondering how many there actually are.
Similar Patterns
Don't mix these upBadgeCurrent
角标
A tiny marker pinned to the corner of an icon or avatar that says "there is something you need to look at".
Chip
标签
A small rounded pill holding a few words — sometimes selectable, sometimes purely a label.
In one line:A tiny marker pinned to the corner of an icon or avatar that says "there is something you need to look at".
Chip
标签
A small rounded pill holding a few words — sometimes selectable, sometimes purely a label.
Alert
警示框
A message that has to be taken seriously: something broke, something is at risk, and you need to act on it.
Icon Button
图标按钮
A button with only an icon and no text, which is only meaningful when paired with a tooltip.
Badge
角标
A tiny marker pinned to the corner of an icon or avatar that says "there is something you need to look at".
How to tell AI
Three levels of promptAdd the component name and specifics
Add a Badge to the top-right of the "Messages" icon in the bottom navigation: show a number when there are 5 unread, show "99+" past 99, hide at zero, and show a "5 unread messages" tooltip on hover.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a red dot hint to the icon.
Say this instead
Add a Badge to the icon: absolutely positioned at the top-right, a red capsule with white text, "99+" past 99, hidden at zero, with aria-label="N unread" on the anchor — and used sparingly so it does not become visual noise.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.