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.
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.
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.
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.
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.
Patterns & usage
- Selection badges only provide dismiss actions once created.
Last updated: Apr 2020