Structure
Badges are visual indicators for labels, useful to emphasize information to the user. Works best with single word values.
| Property | Token | px | rem |
|---|---|---|---|
| Border radius | radii $1 | 8px | 0.5 |
| Padding | space $5 | 32px | 2 |
| Margin-bottom | space $5 | 32px | 2 |
| Property - variant | Token | px | rem |
|---|---|---|---|
| Height - sm | size $2 | 24px | - |
| Height - md | size $3 | 32px | 2 |
| Height - lg | size $4 | 40px | 2.5 |
| Padding - lg | space $2 | 8px | 0.5 |
| Padding - sm & md | space $1 | 4px | 0.25 |
| Icon margin-right, sm, md, lg | space $1 | 4px | 0.25 |
Typography
| Element | Family | Weight | Size | Rem | px |
|---|---|---|---|---|---|
| badge sm | $body | 400 | $sm | 0.875rem | 14 |
| badge md | $body | 400 | $md | 1rem | 16 |
| badge md | $body | 400 | $md | 1rem | 16 |
Color
| Property & Element - State | Token | Hex |
|---|---|---|
| Icon & Text - Info | $blue800 | # |
| Icon & Text - Neutral | $grey800 | # |
| Icon & Text - Success | $successMid | # |
| Icon & Text - Danger | $dangerMid | # |
| Icon & Text - Warning | $warningMid | # |
| Icon & Text - Purple | $purple1000 | # |
| Bg - Info | $blue100 | # |
| Bg - Neutral | $grey200 | # |
| Bg - Success | $successLight | # |
| Bg - Danger | $dangerLight | # |
| Bg - Warning | $warningLight | # |
| Bg - Purple | $purple200 | # |