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


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


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--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