Badge
Badges are small blocks that represent a complex entity.
Structure
Elements
- Container
- Text
Variations
Size
Default
Small
Medium
| Size | Dimensions |
|---|---|
| Default | 20 px |
| Small | 15 px |
| Medium | 16 px |
Color
Default
Primary
Success
Warning
Danger
- Default
- Primary
- Success
- Warning
- Danger
Style
Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.
Theming
The following table lists the theme properties used to style this component and any variations as well as a sample value.
A full list of properties used within the design system—as well as general usage guidelines—is available on the Theme properties page.
Examples of each theme property may be referenced by clicking a property name in the “property” column.
| Sample | Property | Sample value |
|---|---|---|
indicatorBackgroundColor
Indicator badge used to tally new messages |
#D73D09FF
|
|
indicatorTextColor
Indicator text color guaranteed to contrast on indicator background |
#FFFFFFFF
|