Skip to main content

Tag - Icon Only

An icon only tag is a small visual element used to represent and categorise information within a user interface through an icon.

Overview

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

Tags containing icons only inside a Toast component.

Dos and Don’ts

Do
  • Use to call attention to details in a way that makes it easy to scan.
  • Use it when an icon on it’s own can clearly communicate the purpose.
  • Use when there is not enough space for a standard tag.
Don't
  • Don’t use for interactions crucial for the flow.
  • Don’t use the icon only tag if a label is required to communicate the purpose, use a Tag instead.

Anatomy

Anatomy of an icon only tag.
  1. Icon: A symbol used to communicate a message to the user.

Variations

Default

A tag with a leading icon placeholder and no text

Modifiers

Emphasis

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

Strong

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

Subtle

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

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 tag component with the ghost colour alternative.

Outline

A tag component with an outline.

Information

A pair of strong and subtle information tags.

Success

A pair of strong and subtle success tags.

Warning

A pair of strong and subtle warning tags.

Error

A pair of strong and subtle error tags.

02 Orange subtle

A orange colour tag.

03 Cupcake

A cupcake colour tag.

04 Berry

A pair of strong and subtle berry colour tags.

06 Aubergine

A pair of strong and subtle aubergine tags.

Content

Icons

It is essential to ensure that the icon clearly conveys the intended message of the icon only tag. The icon should be directly related to the flow the user is taking, helping to reinforce the contextual information as required.

Do
A tag with an icon that conveys meaning related to the context.
Don't
A tag with an icon that does not conveys meaning related to the context.

Meaning and purpose

Icon only tags can be used to indicate status or used to convey specific meanings within JET, some examples are displayed below.

A collection of different tag variants
  1. Info: Drawing attention to contextual information for the user
  2. Warning: Drawing attention to non-critical information for the user
  3. Success: Drawing attention to positive information for the user
  4. 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
  5. Offers: Drawing attention to contextual information about the details of a deal or promotion to the user

Interactive states

Icon only tags include default and disabled states.

Default

Default state of a tag.

Disabled

Disabled state of a tag.

Examples

LTR examples

Here is an example of an icon only tag in a left-to-right context:

A card containing two tags.

RTL examples

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