Badges

Badges are non-interactive labels which hold small amounts of information.

Specifications

Badges come in 3 defined heights:

  • Small: 14px
  • Default: 20px
  • Large: 28px

Badges should be centered vertically inside of their containing element.

Font weight: 700

ExampleHeightUse Case
Small Badge 14pxInside lists or other elements
Default Badge 20pxStand-alone or inside lists
Large Badge 28pxStand-alone for emphasis