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
Example | Height | Use Case | |
---|---|---|---|
Small | Badge | 14px | Inside lists or other elements |
Default | Badge | 20px | Stand-alone or inside lists |
Large | Badge | 28px | Stand-alone for emphasis |
Colors
Element | Property | Color |
---|---|---|
Badge (Primary) | Background |
#0063a3 #019aeb |
Text |
#ffffff #ffffff | |
Badge (Secondary) | Background |
#6a6e79 #6a6e79 |
Text |
#ffffff #ffffff | |
Badge (Tertiary) | Background |
#cbcdd6 #cbcdd6 |
Text |
#252a2e #252a2e | |
Badge (High Contrast) | Background |
#252a2e #f1f1f6 |
Text |
#ffffff #171c1e | |
Badge (Success) | Background |
#006638 #1e8a44 |
Text |
#ffffff #ffffff | |
Badge (Warning) | Background |
#fbad26 #fbad26 |
Text |
#252a2e #252a2e | |
Badge (Danger) | Background |
#da212c #da212c |
Text |
#ffffff #ffffff |
Was this page helpful?
Thanks for your feedback!