Core · Show content
Tag and badge
Labels an item with a short status or category (tag), or shows a count (badge).
Example
Seven tag colours and three badges with a count.
Known issues
None known.
Code
Copy the markup
<span class="luz-tag luz-tag--green luz-tag--dot">Running</span><a href="/inbox/">Inbox <span class="luz-badge luz-badge--primary">3</span><span class="u-sr-only"> unread</span></a>Variants and options
A tag takes one colour and, if you like, the dot. A badge takes one colour.
| Class | Effect |
|---|---|
.luz-tag | Neutral: a category with no status |
.luz-tag | Information colours |
.luz-tag | Success colours |
.luz-tag | Warning colours |
.luz-tag | Danger colours |
.luz-tag, .luz-tag | Extra colours for categories, with no status meaning |
.luz-tag | A small dot before the text, a second cue besides colour |
.luz-badge | Brand fill |
.luz-badge | Neutral fill |
.luz-badge | Danger fill |
How it works
Inline <span> elements, styled by components/tag.css. No JavaScript.
- A tag is at least 24 px high, in extra-small text, on a tint of its colour.
- A badge is a small rounded count in the mono font, at least 20 px wide.
Without JavaScript
Nothing changes: tags and badges are HTML and CSS.
Keyboard and ARIA
Tags and badges are not interactive and take no focus.
- The text carries the meaning; the colour adds nothing a screen reader needs.
- A count needs context: put the badge inside the link or heading it counts, and add the unit as visually hidden text if it is not on screen ("3 unread").
Contrast and focus are in the Design tab.
Design
When to use
Use a tag to label an item with a short status or category, and a badge to show a count next to a link or a heading.
When not to use
Do not use a tag for an action: it is not clickable.
- For an action, use a button.
- For a sentence, use an alert.
- Do not give teal or purple a status meaning: they are for categories.
Do and don't
Writing the content
One or two words, in sentence case: "Running", "Degraded".
- Never only a colour name: the reader may not see the colour.
- Badges hold numbers; cap them ("99+") so they keep their size.
Contrast and focus
Each tag puts its text colour on its own tint; badges put white text on a fill.
| Part | Colour on background | Light | Dark | High contrast | Needs |
|---|---|---|---|---|---|
Gray tag | --luz-text-secondary on --luz-surface-strong | 5.3:1 | 5.4:1 | 16.5:1 | 4.5:1 |
Blue tag | --luz-color-info on --luz-color-info-bg over --luz-surface-page | 9.0:1 | 9.7:1 | 13.6:1 | 4.5:1 |
Green tag | --luz-color-success on --luz-color-success-bg over --luz-surface-page | 5.4:1 | 10.1:1 | 8.9:1 | 4.5:1 |
Red tag | --luz-color-danger on --luz-color-danger-bg over --luz-surface-page | 5.4:1 | 10.2:1 | 8.9:1 | 4.5:1 |
Yellow tag | --luz-color-warning on --luz-color-warning-bg over --luz-surface-page | 6.8:1 | 9.0:1 | 8.9:1 | 4.5:1 |
Teal tag | --luz-color-teal on --luz-color-teal-bg over --luz-surface-page | 5.4:1 | 7.1:1 | 8.9:1 | 4.5:1 |
Purple tag | --luz-color-purple on --luz-color-purple-bg over --luz-surface-page | 5.4:1 | 12.2:1 | 9.0:1 | 4.5:1 |
Primary badge | --luz-text-on-fill on --luz-brand-fill | 6.0:1 | 4.9:1 | 14.1:1 | 4.5:1 |
Gray badge | --luz-text-on-fill on --luz-outline | 4.6:1 | 4.8:1 | 21.0:1 | 4.5:1 |
Danger badge | --luz-text-on-fill on --luz-color-danger-fill | 5.6:1 | 6.0:1 | 9.3:1 | 4.5:1 |
Measured from the token values of each mode, rounded down. Needs is the WCAG 2.2 AA minimum: 4.5:1 for text, 3:1 for focus rings, borders and icons.
- Focus: tags and badges take none: they are not controls.
- Not colour alone: the word carries the status;
.luz-tag--dotadds a shape for the status tags.
Tokens it uses
The 24 tokens that components/tag.css reads, by family. Each family links to its page, with the values in every mode. In Figma they are variables with the same names: see Tokens in Figma.
- Color
--luz-brand-fill,--luz-color-danger,--luz-color-danger-bg,--luz-color-danger-fill,--luz-color-info,--luz-color-info-bg,--luz-color-purple,--luz-color-purple-bg,--luz-color-success,--luz-color-success-bg,--luz-color-teal,--luz-color-teal-bg,--luz-color-warning,--luz-color-warning-bg,--luz-outline,--luz-surface-strong,--luz-text-on-fill,--luz-text-secondary- Spacing and sizing
--luz-space-2xs,--luz-space-xs- Typography
--luz-font-mono,--luz-text-xs- Radius
--luz-radius-full,--luz-radius-sm
Keyboard and ARIA are in the Code tab.