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 are not interactive and enhance the user experience by simplifying content organisation and can be embedded in other components such as cards, data tables (among others) to help users understand information more effectively.

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

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