Badge

Badges are small blocks that represent a complex entity.

Structure

Elements

  1. Container
  2. 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.

Inspect component

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