Specifications
Badges should be centered vertically inside of their containing element.
| Example | Use case | |
|---|---|---|
| Small |
Badge
| Inside lists or other elements |
| Default |
Badge
| Stand-alone or inside lists |
| Large |
Badge
| 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
|