Skip to main content

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 style
.bx--tag12 / 0.75Normal / 400.bx--type-caption

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 15px radius.

ClassPropertypx / remSpacing token
.bx--tagheight20 / 1.25-
.bx--tagradius15px-
.bx--tagmargin3px-
.bx--tagpadding-left, padding-right10 / 0.625-

Structure and spacing measurements for a Tag | px / rem