Tag ​

Overview

Tags are non-interactive elements that categorize different content and let users associate multiple topics with a piece of information. Tags make it easier for users to find and discover content related to their interests.

UX/UI Guidelines

Check the design documentation of the component in ZeroHeight.

Usage guidelines ​

When to use ​
  • To visually label, categorize or organize items through keywords, for quick recognition or navigation.
  • As descriptive labels, to add a piece of information to the item they're associated with.

Tags can typically be found in:

  • Cards
  • Tables

Keep in mind that tags increase the amount of visual noise so use them only when they are useful.

When not to use ​
  • Do not use tags as interactive elements with the purpose of filtering; use Selection Tags instead.
  • Do not use tags to provide a counter or status info or to communicate success, error or warning; use Badge instead.

Writing guidelines ​

Length ​

Tags should always include a short keyword or label for easy scanning, displayed in a single line of text.

Labels ​

Use adjectives or names rather than verbs for the labels of your tags.

Capitalization and case ​

Write headings in sentence case.

Accessibility guidelines ​

Design considerations ​

  • Tags have appropriate contrast against the surrounding background. All the background colors comply with accessibility AA guidelines (see here).
  • When changing the background color of tags, make sure it complies with accessibility guidelines.
  • Don't rely only on color to communicate meaning so make sure the text of the label is self-evident.
  • Don't use too many colors to avoid heavy cognitive load for some users.

Specifications ​

Anatomy ​

Anatomy
  • Tag container (or background): Container color can be any of the secondary color, or a custom one.
  • Tag label: Provides a short label, generally a keyword, to describe the content the tag is related to.

Size ​

Tags come in one size. While the height is fixed at 24 px, the width of each tag varies based on the amount of content. All four corners of a tag are rounded with a 12 px radius.

Size

Styling ​

  • Tags are available in all secondary colors of Zurich's color palette. Accessibility AA guidelines were followed (see here).
  • If you need to personalize a tag background color, ensure it complies with accessibility guidelines.
  • Make sure to associate a suitable color to the tag's purpose, e.g., moss for sustainability, and keep it consistent throughout your design.
Styling

Depending on the contrast with the background color, the tags have White or Dark Blue text color. For a more harmonious look, avoid mixing these two styles.

Docs image
Docs image

Behavior ​

Positioning ​

Tags are typically placed in containers such as cards or tables.

Tags can also be placed as single elements next to a button link or other items with a descriptive function, to attract users attention.

Position 2

Alignment ​

Tags can be commonly found grouped. When horizontal space is limited in a tag group, the individual tags wrap to form another line. Keep in mind that using two or more rows can make each tag harder to scan.

As a parent container scales to adapt to different screen sizes, tags' position and alignment within the container can also change.

Tag groups are typically left-aligned when stacked and display an 8px spacing between them, both horizontally and vertically.

Alignment

From Figma to code ​

...

Customization ​

INFO

Check everything about the customization mechanics in the "How it works" documentation.

...