Overview
Overview
Tags classify content using keywords or labels. They’re added to a web page, an asset or other content to help users search for and find related content quickly and easily.
There are 4 types of tags in our Design System:
- Default tags
- Action tags
- Supplementary information tags
- Applied filter tags (removable tags).
All tags are available in 2 sizes. Default and Large. Default tags are used for search results or in cards. Large tags are useful to tag sections of content such as articles and blogs posts.
Default tags
This is the default style for tags, they're used to display a list of keywords or labels but aren't clickable.
<!--Tag list -->
<ul class="qld__tag-list">
<li class="qld__tag">Babies</li>
<li class="qld__tag">Maternity</li>
<li class="qld__tag">General public</li>
</ul>
<!-- Tag list -->
<ul class="qld__tag-list">
<li class="qld__tag qld__tag--large">Babies</li>
<li class="qld__tag qld__tag--large">Maternity</li>
<li class="qld__tag qld__tag--large">General public</li>
</ul>
Action tags
Action tags are clickable links and are used when a tag needs to be interactive. In most cases this is when tags link to additional content related to that tagged topic.
<ul class="qld__tag-list">
<li><a class="qld__tag qld__tag--link" role="link" href="javascript:void(0)">Babies</a></li>
<li><a class="qld__tag qld__tag--link" role="link" href="javascript:void(0)">Maternity</a></li>
<li><a class="qld__tag qld__tag--link" role="link" href="javascript:void(0)">General public</a></li>
</ul>
<ul class="qld__tag-list">
<li><a class="qld__tag qld__tag--large qld__tag--link" role="link" href="javascript:void(0)">Babies</a></li>
<li><a class="qld__tag qld__tag--large qld__tag--link" role="link" href="javascript:void(0)">Maternity</a></li>
<li><a class="qld__tag qld__tag--large qld__tag--link" role="link" href="javascript:void(0)">General public</a></li>
</ul>
Information tags
Information tags convey additional data about a subject and are styled differently to tags that are topic based. These tags are most often used for content that is numerical such as read time, distance and file size. This style of tag is also used to indicate result numbers within our filterable search component.
Information tags are similar but not the same as badges. Badges usually contain numbers or icons and are used to indicate a status, notification count, or a very small piece of information attached to an item. Information tags similar to badges often contain numbers but don't sit within the component, are larger and convey more unique content.
Applied filter tags
Applied filter tags are a unique variant of large clickable tags that are used to indicate applied filters or facets.
<div class="qld__tag-list--wrapper">
<!-- Filtered by title -->
<span class="qld__tag-list--title">Filtered by:</span>
<ul class="qld__tag-list">
<li>
<div class="qld__tag qld__tag--filter" tabindex="-1">Policies and procedures<button class="qld__tag--filter-close" data-toggleurl="{{toggleUrl}}">
<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#close"></use></svg>
<span class="sr-only">close</span>
</button>
</div>
</li>
<li>
<div class="qld__tag qld__tag--filter" tabindex="-1">Publications<button class="qld__tag--filter-close" data-toggleurl="{{toggleUrl}}">
<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#close"></use></svg>
<span class="sr-only">close</span>
</button>
</div>
</li>
<li>
<button class="qld__btn qld__btn--tertiary">Clear filters</button>
</li>
</ul>
</div>
Usage guidelines
When to use
Tags are versatile UI elements crucial for efficient navigation. Use tags to categorise content into groups, making it easier for users to find related items. Additionally, you can use tags to convey supplementary information such as reading time or file size and manage active filters in data sets.
- Use default tags to indicate contents categories or topics for easier discovery
- Use supplementary information tags to display data such as reading time, distance, or file size
- Use action tags to link to display additional content related to that tagged metadata topic or category
- Use applied filter tags to show and manage active filters on data sets
When not to use
- If you need to represent a hierarchy; tags are non-hierarchical
- Use as a status indicator
- To initiate an action, consider buttons. Try to avoid tags if they might appear alongside buttons as this may cause confusion
- Use to link to page content, consider text links, action tags should link to high level categories
How to use tags
Here are some tips on how to use tags effectively.
Do
- Use adjectives for non clickable tags. Using a verb might make a user think that clicking on them will do something (GOV.UK, n.d.)
- Group tags like words in a paragraph, not a vertical list. This keeps the group compact to improve scan-ability (IBM Primer, n.d.)
- Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags (IBM Primer, n.d.)
- Use a heading level to introduce the purpose of the list of tags in body content. (Digital Transformation Agency, 2018)
Don't
- Use multiple or single tags to categorise items (Carbon Design System, n.d.).
- Mix action tags and default tags. Once you establish a pattern for how tags behave in section try to be consistent with that application (USWDS, 2022)
- Use different sizes of tags next to each other