Type

1. Default

2. Interactive

Status

When using badges to display status use established colors:

1. Green for positive (e.g. confirmed, created, completed, approved, online)

2. Orange for notice (e.g. on hold, paused, planning)

3. Blue for informative (e.g. to do, active, updated)

4. Red for negative (e.g. failed, denied)

5. Grey for neutral (e.g. archived, removed, deleted, offline)

Categories

Badges can be used to display categories for data sets with up to 5 categories.

Consider if similar categories are implemented elsewhere in the UI and if there’s an opportunity to be consistent.

Only use the red badge if necessary since it can appear to be indicating an issue.

Properties

Grey badges can be used to display properties, meta data, and other information that may be helpful to elevate above regular text.

New and Beta Features

The black badge is exclusively used to indicate new features.

The orange badge is used to indicate beta features.