Badge

Two halves of the definition do all the discriminating, and both are easy to check. A badge is attached: it has no meaning apart from the thing it sits on, and moving it somewhere else makes it nonsense, which is why it is drawn on a corner rather than in the flow. And a badge is not interactive: it is a reading of its host, so pressing it does nothing, and if it has its own hit target it has stopped being one. That second half is the line against a chip, which is a value you can select or remove, and against a tag, which is authored metadata you can usually filter by. Roughly: a tag classifies, a chip operates, a badge reports.

What belongs in one is a small count or a state, and nothing else. A number, a “new”, a build result, a dot standing for “something changed here”. A sentence does not fit and should not be made to, and a badge that has to be truncated was carrying the wrong content. Counts want a cap (“99+” is the convention) so the marker cannot outgrow the thing it is stuck to, and the host has to be sized for the widest state at rest, or the whole toolbar reflows the first time the number reaches two digits. The countless variant, a plain dot, is the right choice whenever the exact number is not actionable: nobody decides anything differently at 38 unread than at 41.

Accessibility is where badges quietly fail, because a bare numeral announces as a bare numeral. “9” next to an icon button tells a screen reader nothing, so the count needs a name that says what it counts, either folded into the host’s accessible name (“Inbox, 9 unread”) or carried by the badge itself. Colour alone is worse: a red dot with no text equivalent is use of colour as the only carrier. And if the count changes while the reader is on the page, decide deliberately whether that change is announced, because a badge wired as a live region will interrupt whatever they were reading every time a message lands.

Two neighbours borrow the shape. A presence indicator is a badge whose payload is one of a small set of states about a person, parked on an avatar, and it gets its own entry because the states are the design. An achievement badge is a different word that happens to look the same: it is a collectible award displayed on a profile, and it is the thing itself rather than a marker on something else. The one everybody has met is the count on an app icon, which is the platform side of a push notification and the reason “red dot” reads as a verdict on your morning.