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 indicating Evening menu only, Spicy and vegetarian.

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 for interactions crucial for the flow.
  • If only an icon is required to convey the message, use the tag: icon only component instead.

Anatomy

Anatomy of a tag.
  1. Icon (Optional): Visually supports the label.
  2. Label: Provides information to the user.
  3. Trailing icon (Optional): Indicates additional actions or further interactions.

Variations

Non-interactive

The non-interactive variation should be used by default, and should be used when the tag doesn’t require any interactivity.

A tag with a leading icon placeholder and a label text

Interactive

The interactive variation should be used for non-crucial interactions.

The image shows different states of the interactive tag component such as default, hover and active states

Modifiers

Icon

When incorporating an icon into a tag, it is essential to ensure that the icon clearly supports the label. Icons are only available in the large size of the tag.

Leading

Leading icon provides context and visually supports the label and it is available for both variants.

A tag component with a leading placeholder icon and a label text

Trailing

Trailing icon offers additional actions or indicates further interactions, for this reason it is only available in the interactive set.

A tag component with a trailing placeholder icon and a label text

Emphasis

Depending on the level of visual prominence you want to give to the tag, you can choose between strong or subtle emphasis.

Strong

A tag component with an icon placeholder and label text. The component has a dark background color to indicate string emphasis.

Subtle

A tag component with an icon placeholder and label text. The component has a subtle background color (light grey) to indicate subtle emphasis.

Colours

Select from a range of colour options across the two levels of emphasis.

Neutral

A pair of strong and subtle neutral tags.

Neutral alternative

A subtle alternative for neutral tag.

Ghost

A pair of strong and subtle tags in green color.

Outline

A tag component with an outline.

Information

A pair of strong and subtle tags in blue color.

Success

A pair of strong and subtle tags in green color.

Error

A pair of strong and subtle tags in red color.

Warning

A pair of strong and subtle tags in yellow color.

02 Orange subtle

A tag component in orange color.

03 Cupcake

A tag component in light blue color.

04 Berry

A tag component in light pink color.

06 Aubergine

A tag component in purple color.

Sizes

Height

Two size options are available to suit the scale required.

SizeHeightNotes
aLarge24px-
aSmall16pxIcons are not available for the small size.

Width

Container width is dynamic to the content’s width and retains 4px left and right padding.

A tag component with a long text

Meaning and purpose

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

A collection of different tag variants

Interactive states

The interactive variation includes all interactive states, while the non-interactive variation only includes the default and disabled states.

Default

Default state of a tag.

Hover

Hover state of a tag.

Active

Active state of a tag.

Focus

Focus state of a tag.

Disabled

Disabled state of a tag.

Examples

LTR examples

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

A Burger King restaurant listing in a left-to-right language. with two tags in the top left corner, Promoted on the left and Stampcards on the right
A menu item listing in a left to right language with a title, Menu item. Below it, an offer tag with 'Offer' and dietary tags indicating Vegan, Vegetarian, and Spicy

RTL examples

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

A Burger King restaurant listing in a right-to-left language (hebrew). with two tags in the top left corner, Promoted on the left and Stampcards on the right
A menu item listing in a right to left (hebrew) language with a title, Menu item. Below it, an offer tag with 'Offer' and dietary tags indicating Vegan, Vegetarian, and Spicy

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