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.

Two tags being used to surface restaurant offers on an image of a burger.

Dos and Don'ts

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

If only an icon is required to convey the message, use the tag: icon only component instead.

Anatomy

Container: Holds related UI elements.
Leading icon background (Optional): Background container for leading icon.
Leading icon (Optional): Visually supports the label.
Label: Provides informative infromation to the user.

Modifiers

Icon

When incorporating an icon into a tag, it is essential to ensure that the icon clearly supports the label.

Leading

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

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 label text. The component has a dark background color to indicate string emphasis.

Subtle

Colours

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

Neutral

Neutral alternative

Ghost

Outline

Translucent

Information

Success

Error

Warning

02 Orange subtle

Tag demonstrating the orange subtle colour.

03 Cupcake

04 Berry

05 Turmeric

06 Aubergine

08 Latte

Sizes

Height

Two size options are available to suit the scale required.

	Size	Height	Notes
	Large	24px	-
	Small	18px	-

Width

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

Content

Overrides

A tag component with some label text. This is fully customisable.

Label: The Tag’s label can be bold for increased emphasis.

Meaning and purpose

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

Info: Drawing attention to contextual information for the user
Warning: Drawing attention to non-critical information for the user
Success: Drawing attention to positive information for the user
Error: Drawing attention to critical information for the user. Please review if an icon only tag is appropriate it might be better to use a dialogue, notification, toast or banner component
Offers: Drawing attention to contextual information about the details of a deal or promotion to the user

Examples

LTR examples

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

An example of the tag inside a restaurant listing that displays text from left to right. The tags start on the left of the image.

RTL examples

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

An example of the tag inside a restaurant listing that displays text from right to left. The tags start on the right of the image.

Resources

Figma Web Component	Stable
Figma Web Documentation	Stable
Figma App Component	Stable
Figma App 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