Badge

Badges are compact visual clues that highlight key details on items or objects. Examples of highlighted information include statuses, total items within a group, or categories of related content.

Count

Count Badges give a summary of how many items are within an asset, attributed to an action, or need attention. Count Badges typically appear on Tabs with multiple items within, or as the notifications icon of a main navigation menu. The urgent style is generally reserved for new items. This is a non-interactive badge.

Status

Status Badges help users quickly identify a case or object’s health. Status badges and their colors help users quickly find a case or object’s health. Color alone must not convey meaning according to international accessibility guidelines. The label in the badge itself must also clearly identify the status. This is a non-interactive badge.

Alert

Alert Badges are subtle ways to draw attention to a specific element in the UI. When using them in design, offer accessible labels, as we may not rely on color alone to provide meaning.

Selectable

Selectable Badges are often found in multi-select field inputs or stacks of applied filters on a table.

Tag

Tag Badges reveal user-created tags associated to a case, object, or post. Tags may be either interactive or static. The hash symbol is common on tags, but not required.