Skip to main content

Badges

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

Specifications

Badges should be centered vertically inside of their containing element.

Example Use case
Small

Badge

Inside lists or other elements
Default

Primary Badge




Secondary Badge

Tertiary Badge

High Contrast Badge

Success Badge

Danger Badge

Warning Badge

Stand-alone or inside lists
Large

Badge

Stand-alone for emphasis
Text
Primary



Secondary



High Contrast



Danger



Success

Display a more subtle label
Last updated September 26, 2024.