Tag

Tags are used to categorize content, helping users quickly identify and distinguish items.

Anatomy

Item	Name	Description	Optional
1	Container	Holds the tag content and provides structure.
2	Start Icon	Leading icon, typically placed before the text.	Yes
3	Text	Main written content of the tag.
	~~End Icon~~ (deprecated)	Trailing icon, typically placed after the text.

Specification and properties

Variants

Tags are categorical only. Use them to organize or categorize items that need visual distinction, like in tables, lists, or to match data visualization colors.

We have recently removed our Semantic variants in Figma and will soon deprecate them in code.

To represent semantic meaning or statuses, use the Status Indicator.

Tags variants

They don’t carry semanting meaning: colors can be changed without affecting their purpose.

Tags currently use legacy data colors. We are redefining the colors to align with our tokens and for a more consistent application across products.

Spacing

Property	Value	Token
Side Padding	8px	spacing.100
Gap	4px	spacing.50

Structure

All tags have a 4px border radius and a 24px height. Width is limited to 200px length, after which the text label gets truncated.

Property	Value	Token
Border radius	4px	border-radius.50
Height	24px	sizing.300