Tag

Usage

Example

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 avoid labels expanding to two rows. If the Tag is too long, not fitting the avaialble space, it automatically truncates the label.
  • If for some reason, a long label is needed, multiline prop can be used to allow spanning onto multiple lines.
• Keep an 8px minimum space between tags.
• Tags almost always appear in a group and are often related to some other element on the page (e.g. card or search page as filters). Aim to keep tags and their related elements close to each other so the user can easily interpret the relation.
• When displaying multiple tags together, place them inline as a row of options, not listed vertically. Overflowing tags should break to the next line.
• Unlike status labels, tags can be configured to be clickable and deletable or also to function as a link. You can use this feature to create removable filters/selections or links to category filtered pages.

Variations

Default

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

Clickable

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

Clickable tags and buttons are similar; they both provide visual cues to encourage users to take actions and make selections. Tags are used dynamically based on the situation to enhance the user’s current journey, while buttons are designed to facilitate important actions and advance through the product.

Although tags may have the same interactivity as a button or a link, a tag should not be used as a replacement for a button.

Remember to add a descriptive aria-label to clearly indicate the action to assistive technologies.

Deletable

Tags can be configured to be deletable by giving them an onDelete function prop. This adds a cross icon inside the tag to indicate deletable function. Deletable tags represent removable pieces of information entered by a user and are useful in situations where tags are used as filters (e.g. for search).

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

With icons

All Tag variants can contain icons by adding iconStart or iconEnd props. Remember an icon should always serve a distinct, easily understandable purpose.

Link

Tags can be configured to be a link by giving them a href prop. Since these Tags are fully interactable they can be also focused and receive default HDS focus indicator styling.

We strongly recommend that tag is always an internal link as it is usually based on service taxonomy if there is a need to link to external site, remember to add external link icon and inform also screen readers

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

Large variant

The large tag variant is particularly well-suited for search and filter usage on smaller screens. The increased touch area in clickable, deletable, and link tags enhances accessibility and meets WCAG AAA-level in the target size requirements.