Badges

Badges overview

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

Last updated: Apr 2020

Status badges

Overview

Status badges and their color 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.

Positive, negative, warning, waiting, and the general information styles of Status badges

Patterns & usage

  • Use only one Status badge at a time on Pega cases and objects.
  • Status badges are commonly the first item of data in the secondary region of a case’s Summary or Preview panel.
  • When reviewing cases or objects in a table, Status badges have their own column.
  • Color in Cosmos is tied to meaning. Do not use the colors of Status badges at random.
  • Keep labels short and sweet. One to two words maximum is best.

Last updated: Apr 2020

Attention badges

Overview

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

Active user, new notice, and unread styles of Attention badges

Patterns & usage

  • Use the New notice Attention badge style when the number of the new items is less important, or space is a concern.

Last updated: Apr 2020

Count badges

Overview

Count badges give a summary of how many items are within an asset, attributed to an action, or need attention.

Default, selected, and urgent styles of Count badges

Patterns & usage

  • Tabs or Cards with many items inside of them will often use a Count badge. Tallied actions (e.g. “Like this article”) also use Count badges.
  • Use Selected Count badges for the selected Summary panel Tab or chosen action. (e.g. If a user pressed a “Like” button, the Count badge style should toggle to the Selected style)
  • Use Urgent Count badges to highlight new items that need attention.
  • Do not mix the Urgent and the Default style of badges on a single item.
  • Avoid numbers longer than 3 digits when possible.

Last updated: Apr 2020

Tag badges

Overview

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

Tag badge style

Patterns & usage

  • Tag badges often allow users to click and filter results by the chosen tag.

Last updated: Apr 2020

Selection badges

Overview

Selection badges are used exclusively within the Mutli-select Autocomplete component to show what has already been chosen. Previously known as Pills.

Selection badge style

Patterns & usage

  • Selection badges only provide dismiss actions once created.

Last updated: Apr 2020