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!