Tag
Tags are used to show attributes of an object or element such as categories. HDS also uses Tags to present filters selected for searches.
The default rectangular tags are deprecated. The rounded cornered variant will replace the default rectangular Tag in the next major release. As a result the RoundedTag and LargeRoundedTag components will be removed and supported within the default Tag component.
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 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.
Rectangular variations
DeprecatedDefault
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. 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 a descriptive aria-label to clearly indicate the link target or action to assistive technologies.
Deletable
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 a descriptive aria-label to the delete button to clearly indicate what the user is deleting when triggering the action.
Rounded variations
Rounded default
Tags with rounded corners can be used in card patterns where a Tag categorizes the card content. A rounded Tag can also be helpful in tag groups when multiple categorizations are needed.
By default, Tags are non-interactable elements. They only include a label and do not have any specific styling.
Rounded clickable
Tags with rounded corners can also 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 a descriptive aria-label to clearly indicate the link target or action to assistive technologies.
Rounded deletable
Tags with rounded corners can also be configured to be deletable by giving them an onDelete function prop. This enables a delete icon inside the Tag. The rounded corner Tags have the delete icon on the right side of the label. Deleting can be useful in situations where Tags are used as filters (e.g. for search).
Remember to add a descriptive aria-label to the delete button to clearly indicate what the user is deleting when triggering the action.
Large rounded deletable
The large rounded Tag variant is suited for search and filter usage. Larger area and text are more accessible, especially on mobile devices.