CivicTheme
  • Docs
  • Changelog
  • Getting started
    • Introduction
    • Installation
    • Getting help
    • Security policy
    • Partnerships
  • Installation
    • Drupal theme
  • Contributing
    • Contribution model
    • Contribution basics
    • Small contribution spec
    • Medium contribution spec
    • Major (RFC-level) contribution spec
    • Code of conduct
    • Figma contributions
  • Components
    • Component list
    • Atoms
      • Button
      • Chip
      • Content link
      • Check box
      • Field description
      • Field message
      • Fieldset
      • Label
      • Radio
      • Select
      • Textarea
      • Text field
      • Heading
      • Link
      • Paragraph
      • Popover
      • Quote
      • Table
      • Tag
      • Text list
    • Molecules
      • Accordion
      • Attachment
      • Breadcrumb
      • Callout
      • Event Card
      • Field
      • Figure
      • Group filter
      • Logo
      • Map
      • Navigation card
      • Next step
      • Pagination
      • Promo card
      • Search
      • Service card
      • Single filter
      • Snippet
      • Subject Card
      • Table of Contents
      • Tabs
      • Tag List
      • Tooltip
      • Video Player
    • Organisms
      • Alert
      • Banner
      • Campaign
      • Footer
      • Header
      • List
      • Message
      • Mobile Navigation
      • Navigation
      • Promo
      • Side Navigation
      • Skip link
      • Slider
      • Social links
  • Content Authoring
    • Overview
    • Global settings
      • Favicon
      • Header
        • Site slogan
        • Header logos
        • Primary navigation
        • Secondary navigation
      • Banner
      • Search
      • Link
      • Skip link
      • Side navigation
      • Signup
      • Footer
        • Footer logo
        • Social links
        • Footer navigation
        • Acknowledgement of Country
        • Copyright
      • Colours
    • Content types
      • Page
        • Configure the banner
      • Event
      • Alert
    • Content components
      • Accordion
      • Automated list
      • Attachment
      • Callout
      • Campaign
      • Content
        • Quote
      • iFrame
      • Manual List
        • Event card
        • Event reference card
        • Navigation card
        • Navigation reference card
        • Promo card
        • Promo reference card
        • Publication card
        • Service card
        • Subject card
        • Subject reference card
        • Snippet
      • Map
      • Next step
      • Promo
      • Slider
      • Webform
    • Vocabularies
      • Topics
      • Site sections
    • User accounts & roles
Powered by GitBook
On this page
  • When to use
  • When not to use
  • Best practice guidelines
  • Variations
  • Accessibility
  • Security
  • Component inspiration and uplift
  • User research on this component
  • Known issues
  • More research needed
  • Help improve this component
  • Resources
  • References
  • Changelog
  • Contact us

Was this helpful?

Edit on GitHub
Export as PDF
  1. Components
  2. Atoms

Tag

Tags are visual indicators that categorise and label content, helping users quickly identify and filter information based on relevant attributes or topics.

When to use

Use the Tag component when you need to:

  • Categorise content by type, status, or topic to help users quickly scan and identify relevant information

  • Allow users to filter content based on attributes or categories

  • Highlight important metadata, such as content status, format, or other attributes

  • Create a visual system for content classification that aids scanning and recognition

  • Provide a consistent labelling system across different content types

When not to use

Do not use the Tag component when:

  • The action requires user interaction that changes system state (use buttons instead)

  • The element is meant to navigate users to another page (use links instead)

  • You need to display complex information that requires more context

  • The interface already contains many visual elements and adding Tags would create visual clutter

  • The categorisation is not meaningful to users or doesn't aid in comprehension or navigation


Best practice guidelines

  • Consistency: Use Tags consistently across your digital service to establish a clear visual language. Maintain consistent styling, sizing, and placement.

  • Clarity: Keep Tag text concise and clear. Aim for 1-3 words that accurately describe the category or attribute.

  • Visual distinction: Ensure Tags are visually distinct from buttons and other interactive elements to avoid confusion about their function.

  • Purposeful colour: Use colour purposefully to convey meaning, but never rely solely on colour to communicate information. Ensure colour choices meet accessibility standards.

  • Limited quantity: Avoid using too many Tags on a single piece of content. Too many Tags can overwhelm users and diminish their effectiveness.

  • Hierarchy: If using different styles of Tags (primary, secondary, tertiary), establish a clear visual hierarchy that reflects the importance of the information.

  • Responsive design: Ensure Tags adapt appropriately to different screen sizes without losing readability or purpose.

  • Contextual relevance: Only use Tags that are relevant and helpful to users within the context they appear.

Variations

  • Primary Tag: Used for the most important categories or statuses

  • Secondary Tag: Used for supporting categories or attributes

  • Tertiary Tag: Used for supplementary information

  • With Icon: Tags can include icons to enhance visual recognition

  • Without Icon: Tags can be displayed without icons for simpler presentation


Accessibility

Based on the CivicTheme v1.7.0 Accessibility Assessments document, the Tag component meets WCAG 2.2 AA accessibility guidelines, with the following test results:

WCAG Criterion
Level
Status
Notes

1.4.3 Contrast (Minimum)

AA

Pass

1.4.4 Resize text

AA

Pass

1.4.11 Non-text Contrast

AA

Pass

1.4.12 Text Spacing

AA

Pass

2.1.1 Keyboard

A

Pass

2.4.4 Link Purpose (In Context)

A

Pass

2.4.7 Focus Visible

AA

Pass

2.5.8 Target Size (Minimum)

AA

Fail

The size of the target for pointer inputs is less than the required 24 by 24 CSS pixels

3.2.3 Consistent Navigation

AA

Pass

3.2.4 Consistent Identification

AA

Pass

Security

No specific security considerations have been identified for the Tag component. As a static UI element without data processing functionality, it presents minimal security risk when implemented according to CivicTheme guidelines.

Component inspiration and uplift

This atomic element has been modelled after Tags in the Australian Government Design System (AGDS). CivicTheme has uplifted the component in the following ways:

  • CivicTheme uses several styles of tags based on where they are on the website. They appear within Card components (featured in the agency's primary colour) and within the body of the website (positioned at the end of information).

  • CivicTheme's Tags use rounded corners in their appearance and do not use text underlines, presenting a button-like appearance instead.

  • Tags may feature optional icons to visually distinguish between event types or topics.

  • Interactive states are enhanced with changes in both border and background colours.

  • Similar to Victoria's Ripple design system, CivicTheme presents tags with fully-rounded styling to clearly distinguish and separate their appearance from regular buttons and their interactions.


User research on this component

★★★☆☆ Confidence rating = Moderate (Limited evidence from user testing)

Based on available information, user research on the Tag component appears to be limited. While the component has been implemented across multiple sites and follows established design patterns, there is insufficient evidence of extensive dedicated user testing specifically for this component.

Research on similar tag components in other design systems suggests that users generally understand the concept of tags as content categorisation mechanisms, particularly when they are presented with visual consistency and clear labelling.

Known challenges include ensuring sufficient contrast between different tag types and maintaining readability at smaller screen sizes.

Further research is needed to validate specific design decisions around the CivicTheme Tag component implementation.

Known issues

  • Target size limitations: As noted in the accessibility assessment, the Tag component does not currently meet the WCAG 2.2 AA requirement for minimum target size (24x24 CSS pixels). This may impact users with motor control difficulties.

  • Colour contrast in certain themes: In some colour theme configurations, there may be insufficient contrast between different tag types, potentially reducing visual distinction.

  • Touch target size on mobile: On smaller mobile devices, tags may be difficult to tap accurately if placed close together.

More research needed

Further research is needed in the following areas:

  • User comprehension of the different tag types (primary, secondary, tertiary) and whether these distinctions are meaningful and useful

  • Effectiveness of tags with icons versus tags without icons in aiding quick visual recognition

  • Optimal number of tags to display before user cognitive load increases

  • Performance of tags in filtering interfaces versus pure categorical display

  • Accessibility evaluation with users who have motor control disabilities, specifically addressing the target size issue

Help improve this component

To help make this component useful and up-to-date, you can:

  • Contribute to our Tag component discussion thread

  • Submit your user research findings to help improve the Tag component

  • Propose a change to the Tag component to address known issues

  • Report any additional accessibility or usability issues you encounter


Resources

  • Storybook

  • GitHub

References

Changelog

Version
Date
Changes

v1.8.0

23 Jul 2024

Renamed Tags to Tag

v1.7.0

20 Mar 2024

Updated for WCAG 2.2 compliance assessment

v1.6.0

[Previous date]

[Previous changes]

Contact us

PreviousTableNextText list

Last updated 1 month ago

Was this helpful?

Check out our to learn more.

If you have a question about the CivicTheme design system or need our help, visit the page for guidance.

contributing section
Figma
Web Content Accessibility Guidelines (WCAG) 2.2
Nielsen Norman Group: The Use of Category Badges
Digital Service Standard (DSS)
Getting Help