Skip to main content

Tag

A tag is a small visual element used to represent and categorise information within a user interface.

Overview

The purpose of tags is to provide a quick and visually appealing way to highlight or identify specific items, topics or attributes. Tags enhance the user experience by simplifying content organisation and facilitating content discovery and filtering. Tags can be embedded in other components such as cards, data tables (among others) to help users understand and filter information more effectively.

A group of tags.

Dos and Don’ts

Do
  • Use when content is mapped to multiple categories, and the user needs a way to differentiate between them.
  • Use to call attention to details in a way that makes it easy to scan.
Don't
  • Don’t use when an interaction is required, use a chip if needed.

Anatomy

Anatomy of a tag.
  1. Icon (Optional): Visually supports the label.
  2. Label: Provides information about the content or purpose of the tag.
  3. Container: Background container that organises the information.

Variations

Type

Tag can use colour for visual categorisation.

Neutral

A pair of strong and subtle neutral tags.

Blue

A pair of strong and subtle tags in blue color.

Green

A pair of strong and subtle tags in green color.

Yellow

A pair of strong and subtle tags in yellow color.

Red

A pair of strong and subtle tags in red color.

Brand

A subtle tag in brand color.

Neutral - alternative

A subtle alternative for neutral tag.

Outline

An outline tag.

Ghost

A ghost tag.

Modifiers

Emphasis

Tags are available in two types of emphasis. Not all colours available within the subtle emphasis are available within the strong emphasis, for example, brand, neutral - alternative, outline and ghost have only subtle variations.

Strong

A variation of tag which uses strong colors.

Subtle

A variation of tag which uses subtle colors.

Icon

Icons can be used to visually support the Tag’s label. Only available at the large size.

With icon

A tag with an icon.

Without icon

A tag without an icon.

Sizes

Small

16px height. Small tags don't support icons.

Small size tag with 16px height.

Large

24px height.

Large size tag with 24px height.

States

Tag is available in 2 states. The disabled state has an opacity of 50%.

Default

Default state of a tag.

Disabled

Disabled state of a tag.

Content

Label guidance

Tag doesn’t have a maximum width or overflow. The container width is dynamic to the content’s width.

Do
  • Use concise and scannable text.
  • Use 3 words or fewer.
  • Use sentence case.
Don't
  • Don't overcrowd the label with unnecessary information or excessive details.
  • Don't use more than 3 words in the label.
Do
A tag with a one-word label.
Don't
A tag with a sentence in the label.

Visual representation

Tags and colours can be used to indicate status or used to convey specific meanings within JET which are displayed below.

Specific meaning of colors and the purpose of tags.

Examples

Outlines the atomic level interactive elements for the component.

LTR examples

Here are some examples of tags in left-to-right context:

A left-to-right example of an offer with a subtle green tag.
A left-to-right example of opening hours of a restaurant with a subtle brand tag.
A left-to-right example of a tag used on a restaurant listing card.
A left-to-right example of disabled offer tag in a menu item card.

RTL examples

Here are some examples of tags in right-to-left context:

A right-to-left example of neutral and brand tags used on a restaurant listing card.
A right-to-left example of an offer tag used in a price breakdown.

Resources

Figma Component
 Stable
Figma Documentation
 Stable
Web Components
 Beta
Vue [Fozzie]
 N/A
React [Snacks]
 Stable
iOS JustUI [UI Kit]
 Stable
iOS PIE [SwiftUI]
 Planned
Android PIE [Compose & Views]
 Stable