UI Design
Badge
A badge is a small label attached to another element, often showing a count or status, that conveys information at a glance.
Why it matters
Badges surface quick, scannable signals — like how many unread messages you have — without forcing people to open anything.
In depth
A badge is informational and attached to a parent element, which sets it apart from a tag: a tag stands alone and is often selectable or removable, while a badge simply reports a state or count. Keep badge content short, usually a number or a single word, and don't rely on color alone to carry the meaning. If the number grows large, cap it with something like '99+' to keep the layout tidy.
Real-world example
A red circle showing '3' sits on the corner of a notification bell, telling you three items are waiting.
Badge = attached & informational; tag = standalone & removable.
Related terms