Components
Badge
Badge is a very small marker that sits on top of an icon or list item, signaling status such as an unread count or that something new is waiting.
Definition
A badge is a very small marker that sits on top of another element. The most common examples show the number of unread notifications, announce that something new is waiting with a single small dot, or attach a short label like NEW next to a list item to signal its status. The key idea is that a badge is never a standalone element on its own — it always rides along on something else and sits on top of it. That is why a badge usually lands in an eye-catching spot, like the top-right corner of an icon, and stays small enough not to disrupt the flow of the surrounding content. Because it only makes sense when it has a host to attach to, a badge is clearly different in nature from a label used on its own.
Why does it matter?
Badges matter because they can announce a change in state instantly, without redrawing the whole screen. Users don't have to open every menu one by one — a quick glance at the badges tells them where the new activity is. A number badge showing an unread count is an especially strong signal, guiding users toward what they should check next. That said, a badge pulls attention hard, so its very presence creates a subtle sense of pressure and an urge to go check. Deciding where to place a badge is therefore less a matter of decoration and more a design judgment about where you want to send the user's attention. Used well, a badge acts as a guide; used carelessly, it becomes noise that keeps nagging the user.
Common mistakes
- Scattering badges everywhere. When every menu carries a red dot and a number, users can't tell what is actually urgent, and they end up ignoring the badges altogether, treating them like background. When there are too many signals, none of them is a signal anymore.
- Exposing large numbers as-is so the badge width grows unchecked. A value like 1024 pushes neighboring elements aside, the layout shifts, and the icon's position drifts slightly from screen to screen, breaking the sense of a tidy interface.
- Leaving a bare number with no context, so it's unclear what it's counting. A number floating without context forces the user to guess every time whether it's unread messages or an error count, so in the end the badge raises more questions than it answers.
Practical tips
- When the number gets large, cap it and shorten the display, like 9+ or 99+. The width stays consistent so the layout doesn't shift, and often the fact that there are simply a lot matters more than the exact count.
- Save badges for the places that truly need attention. Use a single dot for a simple "something is here" marker, and a number only when the count matters — that keeps the loud and quiet signals distinct so users tackle the urgent things first.
- Pick a badge color that contrasts strongly with the background, and check that the text inside it is legible too. The smaller it is, the clearer it has to be, and it's safer to pair a number or label with the color rather than relying on color alone to carry the meaning.