Design
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”- Container
- Icon
- Tag text
- 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.