Tag

Tags are used to highlight the status of an item or make it easier to recognize certain items in data-dense content. Be wary of using multiple tags on one item, as it could cause visual noise.

Anatomy

Anatomy

Item

Name

Description

Component

1

Container

The chip container

-

2

Icon

Leading icon

Icon

3

Icon

Trailing icon

Icon


Specification and properties

Variants

When using tags, they can be presented in two forms: outline or filled. In the context of tables, it is recommended to use outline tags to ensure they do not overwhelm the user interface.

Appearance

Variant

Description

Outline

Use outline tags by default and in places where there are many tags in close to eachother.

Filled

Filled tags are more suitable when used seperately.

Types

The component has two types; Semantic and Categorical.

Semantic

These tags use semantic color palettes and therefore carry the meaning those colors serve across the product.

Section - Semantic

Each color should be chosen wisely based on the meaning it conveys:

  • Basic Subtle (Default) and Bold- general information, status, or state that doesn't require attention
  • Success - completed status, successful outcome.
  • Info - this variant uses the semantic info color, and its purpose is to communicate informational, supportive, educational, or helpful feedback.
  • Warning - pending status that requires the user's attention, action to unblock further processing.
  • Danger - error status, blocked task, negative feedback,
  • Primary (Accent) - new feature, new item that requires further processing,

Tag color

Background (filled)

Border (outlined)

Text and icons

Basic Subtle

background.alert.basic.secondary

border.alert.basic

text.alert.basic

Basic Bold

legacy-support.tag.background.basic-bold

legacy-support.tag.border.basic-bold

legacy-support.tag.text.basic-bold

Red

background.alert.danger.secondary

border.alert.danger

text.alert.danger

Green

background.alert.success.secondary

border.alert.success

text.alert.success

Orange

background.alert.warning.secondary

border.alert.warning

text.alert.warning

Blue

background.alert.info.secondary

border.alert.info

text.alert.info

Primary

legacy-support.tag.background.primary

legacy-support.tag.border.primary

legacy-support.tag.text.primary

 

Categorical

They do not carry any semantic meaning and have purely purpose of separating information into distinct categories. Color could be swapped without causing any effect on the tag's meaning.

Section - Categorical

Spacing

Spacing

Structure

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

Structure

Optional elements

Optional elements

Item

Name

Description

1

Icon

Leading Icon

2

Icon

Trailing Icon