Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetFooterIconKorosLoading spinnerLogoNavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupStatus labelTabsTagPrinciplesAccessibilityUsage and variationsDemos & APIText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Tag

StableAccessible

Tags are used to show attributes of an object or element such as categories. HDS also uses Tags to present filters selected for searches.

Principles

  • Tags are meant for presenting object attributes and filters. If you are presenting status information, use Status label component instead.
  • Keep labels short and concise. Use 1-2 words at maximum and do not use labels expanding to two rows.
  • Do not use icons inside Tag labels.
  • Tags are often related to some other element on the page (e.g. table row or search field as filters). Aim to keep tags and their related elements close to each other so the user can easily interpret the relation.
  • Unlike status labels, tags can be configured to be clickable and deletable. You can use this feature to create removable filters/selections or links to category filtered pages.

Accessibility

  • For interactable Tags you must set a descriptive aria-label for assistive technologies so the user understands what happens if the Tag is clicked. For example aria-label="Move to category: <category name>".
  • It is advisable to use colour combinations provided by the implementation. These combinations are ensured to comply with WCAG AA requirements. When customising colours, refer to colour guidelines to ensure accessibility.
  • If you are customising tag colours, make sure they are easily distinguishable from HDS UI Colours. These colours are reserved to present UI state and status information in applications using HDS.
  • Remember that colour should never be the only way of conveying information. Make sure the meaning of the status label is clearly described by the label text. Refer to WCAG 2.1 Use of Color guideline for more information.

Which role attribute should be used with Tags?

  • HDS Tags can be clickable. In this case, it needs either a role=“link” or role=“button” as an attribute. The role value should be decided as follows:
    • If the user's focus is moved to another location or another page is opened, the role should be link. Example: The user clicks a Tag labeled as "News". The tag takes the user to a new page that lists all items tagged as "News".
    • If, however, the tag will result in the page's content being dynamically changed (i.e. Tag triggers an action), use role=“button”. Example: Clicking the tag will cause a search below to be filtered.

Usage and variations

Basic tags

By default, Tags are non-interactable elements. They only include a label and do not have any specific styling.

News
Announcements
Core:
<div class="hds-tag">
<span class="hds-tag__label">News</span>
</div>
<div class="hds-tag">
<span class="hds-tag__label">Announcements</span>
</div>
React:
<Tag>News</Tag>
<Tag>Announcements</Tag>

Clickable tags

Tags can be configured to be interactable by giving them an onClick function prop. This way Tags can act as links or actions. Since these Tags are fully interactable they can be also focused and receive default HDS focus indicator styling.

Remember to add descriptive aria-label to clearly indicate the link target or action to assistive technologies.

News
Announcements
Core:
<div class="hds-tag" role="link" tabindex="0" onclick="" aria-label="Move to category: News">
<span class="hds-tag__label">News</span>
</div>
<div class="hds-tag" role="link" tabindex="0" onclick="" aria-label="Move to category: Announcements">
<span class="hds-tag__label">Announcements</span>
</div>
React:
<Tag
role="link"
onClick={() => {}}
aria-label="Move to category: News"
>News</Tag>
<Tag
role="link"
onClick={() => {}}
aria-label="Move to category: Announcements"
>Announcements</Tag>

Deletable tags

Tags can be configured to be deletable by giving them an onDelete function prop. This enables a delete icon inside the Tag. Deleting can be useful in situations where Tags are used as filters (e.g. for search).

Remember to add descriptive aria-label to the delete button to clearly indicate what the user is deleting when triggering the action.

News
Announcements
Core:
<div class="hds-tag">
<span class="hds-tag__label">News</span>
<button aria-label="Delete filter: News" class="hds-tag__delete-button button-reset">
<span aria-hidden="true" class="hds-icon hds-icon--cross"></span>
</button>
</div>
<div class="hds-tag">
<span class="hds-tag__label">Announcements</span>
<button aria-label="Delete filter: Announcements" class="hds-tag__delete-button button-reset">
<span aria-hidden="true" class="hds-icon hds-icon--cross"></span>
</button>
</div>
React:
<Tag
onDelete={() => {}}
deleteButtonAriaLabel="Delete filter: News"
>News</Tag>
<Tag
onDelete={() => {}}
deleteButtonAriaLabel="Delete filter: Announcements"
>Announcements</Tag>

Demos & API

Core

Tags in hds-core

React

Tags in hds-react

Tags API