Tag
Tags are compact labels used to categorize or highlight content, helping users quickly identify status, type, or context.
Tags are used to label, categorise or highlight content in a compact form. They help users identify the status, context or type of information quickly and consistently. Tags may include an icon or a link depending on the use case.
When to use it (and when not to)
Section titled “When to use it (and when not to)”Use Tags when you need to:
- Indicate the status or category of an element (e.g. Success, Danger, Information).
- Display metadata or filters (e.g. search results, filters applied).
- Highlight contextual links (when using the Has Link variant).
Avoid using Tags:
- For primary actions — use buttons instead.
- In bulk or dense layouts without clear hierarchy (as visual noise).
- When a plain label or badge would suffice without interaction.
Quick summary of accessibility & consistency
Section titled “Quick summary of accessibility & consistency”- Tags maintain minimum contrast and legibility across all variants.
- Use tokenised colour and typography values for consistency across themes and surfaces.
- Offer keyboard and screen reader support when interactive.
- The component is built for consistency across themes and surfaces.
Properties
Section titled “Properties”Anatomy
Section titled “Anatomy”Tag
Direction: Horizontal
Alignment: Middle left
Item spacing: 32
Padding left: 8
Padding right: 8
icon-label
Direction: Horizontal
Alignment: Middle left
Item spacing: 4
Icon (Optional)
Depends on: Icon
Tag text
Text align: Left
Link Button (Optional)
Depends on: Link Button
Type: Standalone
Size: Small
The Tag component supports five types: Success, Danger, Info, Inactive, Neutral. Each is available in two visual styles:
- Bold — solid background
- Subtle — tinted background with border
Subtle
Section titled “Subtle”Success
Tag
Background color:
color-fill-success-muted#c9e7cacolor-fill-success-muted#c9e7ca Border color:
color-border-success-subtle#4caf50color-border-success-subtle#4caf50Tag text
Text color:
color-foreground-neutral-default#333333color-foreground-neutral-default#282830Danger
Tag
Background color:
color-fill-error-subtle#ffd0c9color-fill-error-subtle#ffd0c9 Border color:
color-border-error-default#cc0000color-border-error-default#cc0000Tag text
Text color:
color-foreground-neutral-default#333333color-foreground-neutral-default#282830Info
Tag
Background color:
color-fill-info-muted#c6e3ffcolor-fill-info-muted#c6e3ff Border color:
color-border-info-subtle#0072f0color-border-info-subtle#0072f0Tag text
Text color:
color-foreground-neutral-default#333333color-foreground-neutral-default#282830Neutral
Tag
Background color:
color-surface-neutral-muted#e5e9edcolor-surface-neutral-muted#e4e4e4 Border color:
color-border-neutral-default#282830color-border-neutral-default#282830Tag text
Text color:
color-foreground-neutral-default#333333color-foreground-neutral-default#282830Success
Tag
Background color:
color-foreground-success-subtle#4caf50color-foreground-success-subtle#4caf50Tag text
Text color:
color-foreground-contrast-default#fbfbfccolor-foreground-contrast-default#fbfbfcDanger
Tag
Background color:
color-fill-error-default#cc0000color-fill-error-default#cc0000Tag text
Text color:
color-foreground-contrast-default#fbfbfccolor-foreground-contrast-default#fbfbfcInfo
Tag
Background color:
color-fill-info-subtle#0072f0color-fill-info-subtle#0072f0Tag text
Text color:
color-foreground-contrast-default#fbfbfccolor-foreground-contrast-default#fbfbfcNeutral
Tag
Background color:
color-surface-contrast-default#000000color-surface-contrast-default#000000Tag text
Text color:
color-foreground-contrast-default#fbfbfccolor-foreground-contrast-default#fbfbfcStyling
Section titled “Styling”Colors
Section titled “Colors”| Name | Applied as | Applied to |
|---|---|---|
color-foreground-neutral-default | Text color | Tag text (subtle) |
color-foreground-neutral-default | Text color | Tag text (subtle) |
color-foreground-contrast-default | Text color | Tag text (bold) |
color-foreground-contrast-default | Text color | Tag text (bold) |
color-surface-neutral-muted | Background color | Tag (neutral subtle) |
color-surface-neutral-muted | Background color | Tag (neutral subtle) |
color-border-neutral-default | Border color | Tag (neutral subtle) |
color-border-neutral-default | Border color | Tag (neutral subtle) |
color-surface-contrast-default | Background color | Tag (neutral bold) |
color-surface-contrast-default | Background color | Tag (neutral bold) |
color-fill-success-muted | Background color | Tag (success subtle) |
color-fill-success-muted | Background color | Tag (success subtle) |
color-border-success-subtle | Border color | Tag (success subtle) |
color-border-success-subtle | Border color | Tag (success subtle) |
color-foreground-success-subtle | Background color | Tag (success bold) |
color-foreground-success-subtle | Background color | Tag (success bold) |
color-fill-error-subtle | Background color | Tag (danger subtle) |
color-fill-error-subtle | Background color | Tag (danger subtle) |
color-border-error-default | Border color | Tag (danger subtle) |
color-border-error-default | Border color | Tag (danger subtle) |
color-fill-error-default | Background color | Tag (danger bold) |
color-fill-error-default | Background color | Tag (danger bold) |
color-fill-info-muted | Background color | Tag (info subtle) |
color-fill-info-muted | Background color | Tag (info subtle) |
color-border-info-subtle | Border color | Tag (info subtle) |
color-border-info-subtle | Border color | Tag (info subtle) |
color-fill-info-subtle | Background color | Tag (info bold) |
color-fill-info-subtle | Background color | Tag (info bold) |
Spacing
Section titled “Spacing”| Name | Applied as | Applied to |
|---|---|---|
spacing-sm | Padding inline | Tag |
spacing-sm | Padding inline | Tag |
spacing-2xs | Gap | Icon to Tag text |
spacing-2xs | Gap | Icon to Tag text |
spacing-4xl | Gap | Tag text to Link |
spacing-4xl | Gap | Tag text to Link |
stroke-sm | Border width | Tag |
stroke-sm | Border width | Tag |
Appearance on backgrounds
Section titled “Appearance on backgrounds”Tags are designed for light mode only. They are intended for use inside cards, which always have a white or near-white background. They are not tested for use on dark or coloured surfaces.
Contrast adjustments:
- All subtle variants include a border to enhance visibility.
- All text elements meet WCAG AA contrast: Text 3:1 (as part of UI component), Link 4.5:1 or higher.
Guidance on how to use a component.
- Use tags to clarify type or status.
- Combine with links when contextually relevant.
- Keep labels short and clear.
Guidance on what to avoid when using a component.
- Don’t use tags as buttons.
- Don’t place tags over dark backgrounds.
- Don’t include too many in a small space.
Styles
Section titled “Styles”<div class="tng-tag"> <i aria-hidden class="tng-icon icon-star"></i> <span>Tag text</span> <a class="tng-link" href="#">Link</a></div>
Tag text
Link
Schemes
Section titled “Schemes”<div class="tng-tag is-error"> <i aria-hidden class="tng-icon icon-star"></i> <span>Tag text</span> <a class="tng-link" href="#">Link</a></div>
Tag text
Link
<div class="tng-tag is-info"> <i aria-hidden class="tng-icon icon-star"></i> <span>Tag text</span> <a class="tng-link" href="#">Link</a></div>
Tag text
Link
Success
Section titled “Success”<div class="tng-tag is-success"> <i aria-hidden class="tng-icon icon-star"></i> <span>Tag text</span> <a class="tng-link" href="#">Link</a></div>
Tag text
Link
<div class="tng-tag is-bold"> <i aria-hidden class="tng-icon icon-star"></i> <span>Tag text</span> <a class="tng-link" href="#">Link</a></div>
Tag text
Link
<div class="tng-tag is-bold is-error"> <i aria-hidden class="tng-icon icon-star"></i> <span>Tag text</span> <a class="tng-link" href="#">Link</a></div>
Tag text
Link
<div class="tng-tag is-bold is-info"> <i aria-hidden class="tng-icon icon-star"></i> <span>Tag text</span> <a class="tng-link" href="#">Link</a></div>
Tag text
Link
<div class="tng-tag is-bold is-success"> <i aria-hidden class="tng-icon icon-star"></i> <span>Tag text</span> <a class="tng-link" href="#">Link</a></div>
Tag text
Link
For designers
Section titled “For designers”Tags are built to be accessible and meet WCAG 2.1 AA standards.
- Font size: 12px Book. As the label forms part of a UI component, it qualifies under the 3:1 contrast ratio minimum.
- Colour contrast: All background, text and border combinations meet or exceed required contrast thresholds.
- Icons: Decorative by default (
aria-hidden). Should not duplicate the meaning of the label. If meaningful, must include semantic labelling. - Links: Must be focusable and keyboard navigable. Clearly styled and distinguishable from the tag text. Should include descriptive text for screen readers.
- Motion: Tags use no animation or flashing and do not introduce visual noise.
For developers
Section titled “For developers”Mark decorative icons with aria-hidden="true" (already shown in the examples).
Dismissible tags
Section titled “Dismissible tags”If a tag is dismissible (via a close button), ensure the button has an accessible label, for example aria-label="Remove tag".
Color is not enough
Section titled “Color is not enough”Never rely on color alone for status tags — pair the scheme (is-error, is-info, is-success) with text or an icon so the meaning is accessible.
Content / Copy guidelines
Section titled “Content / Copy guidelines”Tags should use short, descriptive and consistent labels. The tone should be neutral, informative, and suitable for metadata or UI contexts.
- Text: Mandatory. One to three short words (e.g. “Hybrid”, “Low stock”, “Special edition”).
- Capitalisation: Sentence case (e.g. “In progress”).
- Max length: Aim for 18 characters or fewer to ensure layout stability.
- Icons: Optional. Should visually support the text meaning, not repeat it.
- Links: Optional. Must use clear, concise language (e.g. “Edit”, not “Click here”).
- Do not use emojis or punctuation in Tag labels.
- Avoid using verbs in the main label unless combined with a link.