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.
| Property | Font-size (px/rem) | Font-weight | Type token |
|---|---|---|---|
.bx--tag | 12 / 0.75 | Regular / 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.
| Class | Property | px / rem | Spacing token |
|---|---|---|---|
.bx--tag | height | 24 / 1.5 | – |
.bx--tag | radius | 24px | – |
.bx--tag | margin | 8 / 0.5 | $spacing-03 |
.bx--tag | padding-left, padding-right | 8 / 0.5 | $spacing-03 |
Structure and spacing measurements for a tag | px / rem