Badge

Badges can be used to call attention to an important piece of information that should stand out from the rest of the page content.

Variations

Primary badge

This is the most commonly used badge style. It is used to show time zone selection, a disabled or inactive status, or as a replacement for a checkbox selection that cannot be edited.

Secondary badge

This is used for any status other than disabled or inactive, to categorize items, or to call attention to an important piece of information.

Success badge

This is used for any status that is positive and calls for a different badge other than primary badge. This can be used in combination with either primary or secondary badges or by itself.

Alert badge

This is used for any status that is a warning or calls for action to prevent a destructive outcome. This can be used in combination with either primary or secondary badges or by itself.

Configurations