A badge is a read-only status or label: “New”, a count, a discount. It is never clickable.
Every example is the real component, not a picture. Figma: Guidelines.
Badges and tags are visually similar, but tags are interactive and badges are not.
Badge. A badge indicates a status or a count. Badges are read-only status indicators or labels and are not interactive. They can be placed next to, for example, text links.
Tag (TBA). Use tags to let users group, sort or filter information. Tags often hold keywords or metadata and give quick access to categories.
Badge has five types, one set of pages for each. All types come in a desktop and a mobile version.
| Type | Example | Use it for |
|---|---|---|
| Basic | Updated Archive | A status or a label in text. Six states, three emphasis levels, with or without an icon. |
| Dot | A status marker without text, next to a label or on the corner of an icon. | |
| Number | 3 | A count, a step number or a check mark. The default for numbers. |
| Product & Discount | 30% rabattUtförsäljning | E-commerce only: discounts, closing sale and the assortment a product belongs to. |
| Purchase Info | Bra köp | E-commerce only: a badge with a beak that introduces a purchase tip (Good buy, Good to know). |
Use a badge to indicate status, item count, items that need attention, or featured content. A badge must not rely on color alone to carry its meaning: color is not a universal experience.
Combine several elements in one badge (text, emphasis and an icon) to make the meaning easier to see.
Use a badge to emphasize a product feature or item. Think about badge color, placement and emphasis when it sits near buttons.
Use a badge with an icon and a short label for items that need an action or immediate attention.
Use a dot as an indicator to draw attention to an icon or a text link when a status has changed. Dots are not for critical alerts and not for standalone use.
| The element… | Use |
|---|---|
| shows a status or label and is read only | Badge |
| filters or groups when clicked | Tag (not built yet) |
| counts something on an icon (cart) | The header counter .badge |
| must be noticed for a state change | Inline notification |
Badge Basic comes in four alert colors. Each color is paired with an icon, so the meaning does not depend on color alone.
| Color | Example | Meaning | Icon |
|---|---|---|---|
| Informative (default) | Informative | Informative messages. Default color, the most flexible one. | info |
| Success | Success | Positive feedback or success. | check_circle |
| Error | Error | Negative feedback or an error. | error |
| Warning | Warning | The user needs to take notice. | warning |
Use an icon only with its own alert color: each icon has an established meaning. Any other icon from the icon gallery may be used where the guidelines do not forbid it.
Neutral badges are best paired with alert colors to create contrast through emphasis. For example, an informative badge with strong emphasis next to a neutral badge with weak or weaker emphasis. Use neutral for information that is not an alert.
Use color emphasis to reinforce how important or visible a badge is. Without icons, mix emphasis to tell badges apart, so you do not rely on color alone.
| Emphasis | Example | What it is |
|---|---|---|
| Strong | Strong | Darker background. |
| Weak | Weak | A medium, more saturated background. |
| Weaker | Weaker | A light background. |
Do not mix emphasis without a reason. Do it only where it helps users understand, for example a high and a low emphasis badge side by side to tell two text-only badges apart.