UI components · Data display
Badge
Also called: Notification badge, Red dot, Count badge, Indicator
A small red dot or number on the top-right corner of an icon, avatar, or button that tells users there are unread messages or new content.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAdd a red number badge to the top-right corner of the bell icon in the navbar, showing the unread message count. Show "99+" above 99, and hide the badge entirely at 0. The badge is 16px tall and pill-shaped with a white number, and its edge overlaps the icon's top-right corner. In the sidebar menu, show a small red dot with no number next to newly launched features.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Badge is what you need.
Use Badge when
- Entry points like messages, notifications, or the cart that need to show how many items are unread or pending
- Showing a user's status, like online or busy, at the bottom right of an avatar
- Flagging an update next to a menu item or feature entry that goes away once the user has seen it
Pick something else when
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Turning status text like "Shipped" or "Pending review" into red bubbles on a corner, when it should be a tag
- 02
Red dots on almost every icon on the page, so users can't tell which one actually matters
- 03
Still showing a red bubble that says "0" when there's nothing unread
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
The wrapped target element (icon, avatar, or button) and a small dot or number bubble overlapping its top-right corner.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A badge is a small dot or number attached to the top-right corner of another element, like a "3" on a bell icon, a red dot on an avatar, or "New" next to a menu item. It isn't clickable itself. Its only job is to say "there's something new here, and this many." Once users deal with it, it should disappear or the number should go down. Large numbers usually show as "99+."
Badges and tags often get mixed up. The difference is position and meaning. A badge is attached to the corner of another element, and its content is a count or whether there's something new. A tag sits on its own next to text, and its content is a category, status, or attribute, like "Shipped" or "Frontend." The components called Badge in shadcn/ui and Bootstrap are often what we call a tag here.
Badges are usually red to grab attention, so use them sparingly. If red dots are everywhere on the page, users end up ignoring them.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-badge- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-badge.el-badge[class*="MuiBadge-root"].arco-badge.t-badge.n-badge.badge.position-absolute.badge.translate-middle
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026