Skip to content

Tag

Tags are compact labels used to categorize or highlight content, helping users quickly identify status, type, or context.

Quarantine

DesignDevelopAccessibility

Tags label, categorise, or highlight content in a compact form. They help users identify the status, context, or type of information quickly and consistently. A Tag can include an optional icon or link, depending on the use case.

Anatomy

Section titled “Anatomy”
In stock View details
  1. Tag
  2. Star
  3. Tag text
  4. Link

When to use it

Section titled “When to use it”

Use a Tag when:

  • You need to indicate the status or category of an element (Success, Danger, Information).
  • You’re displaying metadata or filters (search results, applied filters).
  • You need to highlight a contextual link via the Has Link variant.

Avoid Tags when:

  • The action is a primary CTA — use buttons.
  • The layout is dense and tags would add visual noise without hierarchy.
  • A plain label or badge would suffice without any interaction.

Properties

Section titled “Properties”

Type

Five semantic types: Success, Danger, Info, Inactive, and Neutral. Each carries a distinct colour set tuned to the meaning, so a Success tag reads as positive across both visual styles.

Style

Two visual styles: Subtle uses a tinted background with a border, Bold uses a solid background. Subtle reads quieter inside lists and cards; bold draws more attention to a single item.

Icon

Optional leading icon, useful for reinforcing the meaning (a check for Success, a warning for Danger). Decorative icons should stay hidden from assistive tech.

Link

Optional trailing Link Button, used when the tag pairs a label with a contextual action. The link inherits the Tag text colour for legibility.

Platform considerations

Section titled “Platform considerations”

Desktop

Tags sit comfortably inline next to titles or metadata. Keep their padding consistent across surfaces so the rhythm of a page holds.

Tablet

Same inline placement. Watch tag density inside cards — too many tags in one row crowd the layout quickly.

Mobile

Stack tags onto multiple rows rather than truncating the labels. Keep the leading icon (if any) at its natural size so the meaning still reads.

Best practices

Section titled “Best practices”

Tags are designed for light mode only — they’re 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.

Do

Use tags to clarify type or status, combine with links when contextually relevant, keep labels short and clear, and lean on the subtle style by default — it includes a border that lifts contrast on light surfaces.

Don't

Don’t use tags as buttons (reach for the actual Button component), don’t place tags over dark backgrounds (the colour set isn’t tested there), and don’t pack too many tags into a small space — visual noise hides the meaning.

Content guidelines

Section titled “Content guidelines”

Tag text should be short, ideally one or two words, and name the status or category in plain language (“In stock”, “Available”, “Sold out”). Use sentence case (“In stock”, not “IN STOCK”) and skip trailing punctuation. When a tag pairs with a link, the link label should name the action (“View details”) so the two read as a coherent unit rather than a redundant repeat.