Shortcuts
Next region
F9
Previous region
ShiftF9
Jump to toast
⌥Enter
Dismiss toast
⌥Q
Go to incoming interaction popup.
⌥Enter
Dismiss incoming interaction popup.
⌥Q

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.

Variations

Count

Count badges give a summary of how many items are within an asset, attributed to an action, or need attention. Count badges appear on utility widgets. This is a non-interactive badge.

Example

3

Status

Status badges and their colors help users quickly find a case or object’s health. Status badges are used only for objects and cases.

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.

Example

Success

Selectable

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

Example

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.

Example

#PegaCosmos

Keyboard

Keyboard badges indicate which keyboard commands are available to a user to perform a particular action.

Example

Generally ⌘ is used as a modifier key

Configuration

All information on this site pertains to the Constellation UX System (from 8.8 and onwards). Looking for something else? See resources specifically for Theme Cosmos. If you have questions, concerns, or any other feedback, please reach to us on Pega Support and include the capability 'User Experience' and 'Constellation' in your request.

Related components