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.
Ask your AI
Add a status badge on top of [notification icon — e.g. bell, messages tab]. If it just needs to signal that something is there, use a single small dot with no number; only use a number badge when the actual count matters. Overlay the badge on the top-right corner of the icon, and cap the number at 99+ once it goes past 99. Give it an aria-label so screen readers announce what's being counted (like "3 unread notifications"), and pick a badge color that contrasts strongly with the background, keeping the inner text legible at 4.5:1 or higher. Never let color alone carry the meaning — always pair it with a number or label.
In the code/screen I'll paste below, find every spot with a red dot or number badge and keep only the ones that genuinely need the user's urgent attention — strip the rest. When every menu carries a badge there are so many signals that none of them is a signal anymore. For the ones you keep, use a single dot for a plain "something's here" marker and a number only when the count matters, so users tackle the urgent things first. Lay it out item by item in a table: what you removed, kept, or downgraded, and why.
In the badge code I'll paste below, fix the case where a big value like 1024 shows as-is, widens the badge, pushes neighboring elements aside, and makes the icon position jitter. Add logic that caps the number and shortens it to 9+ or 99+ past the limit, and set a fixed min-width so the badge stays the same width whether it's 1 digit or 3. Keep the top-right corner anchor stable as the value changes. Along with the fixed code, show me a few examples of how values render (e.g. 5 → 5, 100 → 99+).