Skip to main contentCarbon Design System

Tag

Color

Tag uses component level tokens and values the IBM Design Language color palette. In the light themes tags use color step 20 for the background and step 70 for the text. In the dark themes, tags use color step 70 for the background and step 20 for the text.

Tag colorColor token
Default$tag-background-gray
$tag-color-gray
Red$tag-background-red
$tag-color-red
Magenta$tag-background-magenta
$tag-color-magenta
Purple$tag-background-purple
$tag-color-purple
Blue$tag-background-blue
$tag-color-blue
Cyan$tag-background-cyan
$tag-color-cyan
Teal$tag-background-teal
$tag-color-teal
Green$tag-background-green
$tag-color-green
Gray$tag-background-gray
$tag-color-gray
Cool gray$tag-background-cool-gray
$tag-color-cool-gray
Warm gray$tag-background-warm-gray
$tag-color-warm-gray
High contrast$background-inverse
$text-inverse

Typography

Tag labels should be set in sentence case, and should only have one word. However, if more than one is necessary, then connect the words using a hyphen with no spaces.

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

Structure

All tags have the same height. However, the width of tags varies based on the amount of content. All four corners of a tag are rounded with a 24px radius.

ElementPropertypx / remSpacing token
Tagheight24 / 1.5
radius24px
margin8 / 0.5$spacing-03
padding-left, padding-right8 / 0.5$spacing-03
Structure and spacing measurements

Structure and spacing measurements for a tag | px / rem

Sizes

SizeHeight px / rem
Small (sm)16 / 1
Medium (md)24 / 1.5
Sizes for tag

Tag sizes | px / rem