Skip to main contentCarbon Design System

Tag

The following page documents visual specifications such as color, typography, structure, and size.

Color

Read-only, dismissible, and operational variants of tag use component tokens with values from the IBM Design Language color palette. Light themes use step 70 for text and icons, step 40 for borders, and step 20 for backgrounds. Dark themes use step 20 for text and icons, step 50 for borders, and step 70 for backgrounds. The only exception where core tokens are used are in high contrast and outline styles.

The selectable tag variant only uses core tokens and does not use component tokens.

VariantColorElementPropertyColor token
Read-only tagAll colorsTexttext-colorSee all component color tokens
Iconicon-colorSee all component color tokens
Backgroundbackground-colorSee all component color tokens
High contrastTexttext-color$text-inverse
Iconicon-color$icon-color
Borderborder$border-inverse
Backgroundbackground-color$background-inverse
OutlineTexttext-color$text-primary
Iconicon-color$icon-primary
Borderborder$border-inverse
Backgroundbackground-color$background
Dismissible tagAll colorsTexttext-colorSee all component color tokens
Iconicon-colorSee all component color tokens
Backgroundbackground-colorSee all component color tokens
High contrastTexttext-color$text-inverse
Iconicon-color$icon-color
Borderborder$border-inverse
Backgroundbackground-color$background-inverse
OutlineTexttext-color$text-primary
Iconicon-color$icon-primary
Borderborder$border-inverse
Backgroundbackground-color$background
Operational tagAll colorsTexttext-colorSee all component color tokens
Iconicon-colorSee all component color tokens
BorderborderSee all component color tokens
Backgroundbackground-colorSee all component color tokens
Selectable tagTexttext-color$text-primary
Iconicon-color$icon-primary
Borderborder$border-inverse
Backgroundbackground-color$layer *

* Denotes a contextual color token that will change values based on the layer it is placed on.

Read-only tag colors.

Read-only tag colors

Dismissible tag colors.

Dismissible tag colors

Operational tag colors.

Operational tag colors

Selectable tag color.

Selectable tag color

Interactive state color

Read-only tag variants do not have interactive state colors because they do not have interactive functionality.

Dismissible and operational tag variants use component tokens for hover states. They use core tokens for focus and disabled states.

The selectable tag variant only uses core tokens and does not use component tokens.

VariantColorStateElementPropertyColor token
Dismissible tagAll colorsHoverBackgroundbackground-colorSee all component color tokens
FocusBorderborder$focus
DisabledTexttext-color$text-disabled
Backgroundbackground-color$layer *
High contrastHoverBackgroundbackground-color$background-hover
FocusBorderborder$focus
DisabledTexttext-color$text-disabled
Backgroundbackground-color$layer *
OutlineHoverBackgroundbackground-color$background-hover
FocusBorderborder$focus
DisabledTexttext-color$text-disabled
Borderborder$border-disabled
Backgroundbackground-color$background-disabled
Operational tagAll colorsHoverBackgroundbackground-colorSee all component color tokens
FocusBorderborder$focus
DisabledTexttext-color$text-disabled
Borderborder$border-disabled
Backgroundbackground-color$layer *
Selectable tagHoverBackgroundbackground-color$layer-hover *
FocusBorderborder$focus
DisabledTexttext-color$text-disabled
Borderborder$border-disabled
Backgroundbackground-color$layer *

* Denotes a contextual color token that will change values based on the layer it is placed on.

Dismissible tag interactive colors.

Dismissible tag interactive colors

Operational tag interactive colors.

Operational tag interactive colors

Selectable tag interactive colors.

Selectable tag interactive colors

Typography

Tag titles should be concise and describe the tag in a few words or be under 20 characters when possible. Only include long title content in tags when necessary, for instance, for user-defined names or system-generated strings of text.

ElementFont size (px/rem)Font weightType token
Title12 / 0.75Regular / 400$label-01

Structure

There are three fixed heights of tags—large (32px), medium (24px), and small (18px). However, the width of tags can vary based on the length of the title.

ElementPropertypx / remSpacing token
Tag container (lg)height32 / 2
radius16px
margin8 / 0.5$spacing-03
padding-left, padding-right12 / 0.75$spacing-04
Tag icon (lg)padding-left (decorative)8 / 0.5$spacing-03
padding-right (decorative)4 / 0.25$spacing-02
padding-left (dismissible)12 / 0.75$spacing-04
padding-right (dismissible)8 / 0.5$spacing-03
icon16px
Tag container (md)height24 / 1.5
radius16px
margin8 / 0.5$spacing-03
padding-left, padding-right8 / 0.5$spacing-03
Tag icon (md)padding-left (decorative)4 / 0.25$spacing-02
padding-right (decorative)4 / 0.25$spacing-02
padding-left (dismissible)8 / 0.5$spacing-03
padding-right (dismissible)4 / 0.25$spacing-02
icon16px
Tag container (sm)height18 / 1.125
radius16px
margin8 / 0.5$spacing-03
padding-left, padding-right8 / 0.5$spacing-03
Tag icon (sm)padding-left (dismissible)8 / 0.5$spacing-03
padding-right (dismissible)1 / 0.0625
icon16px
Structure and spacing measurements of read-only tag | px / rem.

Structure and spacing measurements of read-only tag | px / rem.

Structure and spacing measurements of dismissible tag | px / rem.

Structure and spacing measurements of dismissible tag | px / rem.

Structure and spacing measurements of operational tag | px / rem.

Structure and spacing measurements of operational tag | px / rem.

Structure and spacing measurements of selectable tag | px / rem.

Structure and spacing measurements of selectable tag | px / rem.

Structure and spacing measurements of operational tag tooltip and toggletip | px / rem.

Structure and spacing measurements of operational tag tooltip and toggletip | px / rem.

Structure and spacing measurements of operational tag popover | px / rem.

Structure and spacing measurements of operational tag popover | px / rem.

Size

There are three tag sizes — small, medium, and large.

ElementSizeHeight (px/rem)
ContainerSmall (sm)18 / 1.125
Medium (md)24 / 1.5
Large (lg)32 / 2
Small, medium, and large sizes of tag

Small, medium, and large sizes of tag