Tag

Best practices

Tags should be used intentionally to add clarity and context, not as decorative elements. They work best when they provide immediate, high-level understanding of what a section or piece of content represents, helping users scan and orient themselves without interrupting their reading flow. To remain effective, tags should be short, easy to recognise, and visually secondary to headings and primary content.

Consistency is essential. A tag should carry the same meaning wherever it appears across the product, both in wording and visual treatment. Use tags sparingly, ideally one per section, and ensure their placement clearly associates them with the content they describe. When used thoughtfully, tags support comprehension and wayfinding without adding visual noise or competing for attention.

When to use

• Provide high-level context for a section or content block (e.g. category, audience, topic, or status).
• Help users scan and orient themselves on long or content-heavy pages.
• Indicate content attributes such as “New”, “Updated”, or “Research”.
• Support wayfinding by clarifying how a section fits into the broader structure of the site.

Tags work especially well when paired with section headers or content groupings.

When not to use

• The information is already clear from the heading or surrounding content.
• The label requires explanation or additional context to be understood.
• Multiple tags are needed to convey meaning – this usually indicates a taxonomy or filtering problem.
• The label is essential to completing a task or making a decision (use more prominent UI patterns instead).

Anatomy

1. Brand presence
2. Label
3. Background (optional)

Behaviour

By default, tags are non-interactive and exist purely to convey information. They should not respond to hover, focus, or click states unless explicitly designed as interactive elements in a different component (e.g. filter tags or selectable chips). Non-interactive tags should not appear clickable or afford interaction through styling or motion.

Content guidelines

• Use nouns or short descriptors, not full sentences.
• Avoid punctuation and unnecessary qualifiers.
• Use sentence case unless the tag represents a proper noun or brand.
• Be precise. Choose labels that are specific and unambiguous.
• Avoid redundancy. Do not repeat words already present in the heading.

Visual hierarchy & placement

Tags should be positioned close to the content or heading they describe to clearly signal their relationship and purpose. They are typically placed above section headings, where they can be quickly scanned before users engage with the content itself. Spacing and alignment should be consistent to reinforce this association and to avoid ambiguity about what the tag refers to.

Avoid placing tags in locations where they could be mistaken for navigation, filters, or interactive controls, as this can create confusion and undermine their intended role as contextual cues.

Accessibility Considerations

• Tags should be readable at small sizes and maintain sufficient contrast against their background.
• The meaning of a tag should not rely solely on color.
• Screen readers should read tags in a logical order relative to the content they describe.
• Non-interactive tags should not be focusable.

(Technical ARIA and implementation details are covered in the accessibility spec.)