Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Tag

Color

Using the IBM Design Language color palette, the tag text color should be 5 steps away from the tag background color

Typography

Tag text 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.

PropertyFont-size (px/rem)Font-weightType token
.bx--tag12 / 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.

ClassPropertypx / remSpacing token
.bx--tagheight24 / 1.5
.bx--tagradius24px
.bx--tagmargin8 / 0.5$spacing-03
.bx--tagpadding-left, padding-right8 / 0.5$spacing-03
Structure and spacing measurementst

Structure and spacing measurements for a tag | px / rem