Badge

A small pill or circle with a short word or number: “New”, “−20%”, “3”.

Also called: badge, label, tag, chip, pill, counter, red circle with a number, number on an icon, notification dot, status, new label, sale tag

What it is for

A badge goes on an icon, a photo or a list row when you need to say something in a couple of words. For example, how many new messages arrived, or that a product is on sale. It takes almost no room.

Where you see it

• Messengers — a red circle with the number of unread messages
• Online stores — “Bestseller” or “−30%” over a product photo
• Task trackers — statuses like “In progress” and “Done”

What it is called in code

• <span class="badge">
• Badge
• chip / tag

See also

• Avatar — A small picture that stands for a person: a photo, their initials or a generic user icon.
• Bottom navigation — A navigation bar fixed to the bottom of a phone screen, with 3–5 icons for the main sections.
• Card — A rectangular block that gathers everything about one thing: a photo, a name, a price, a button.