Badge
Badges are small blocks that represent a complex entity.

Structure
Elements

- Container
- Text
Variations
Size

Size | Dimensions |
---|---|
Default | 20 px |
Small | 15 px |
Medium | 16 px |
Color

- 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
|