Badge

core package3.2.2

Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.

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.

Alert

Alert Badges are small indicators that are often used alongside Icons or Avatars. They support two variants: success and urgent.

Example

Count

Count Badges are best used for displaying a count of items. It supports a few variants that change the background appearance of the Badge. The count should be passed in as children to the component. Counts that are larger than 999 will render as the closest approximation of the value represented with a numerical unit.

Example

3

Selectable

Selectable Badges are interactable and may be selected or removed. Both onClick and onSelect callback functions will be triggered on user interaction of the Selectable badge, if they are provided. Interacting with the X Button will trigger an onRemove callback, if provided.

There is built-in support for the Escape key as well as Backspace and Delete, with additional keyboard support provided via the onKeyUp callback function.

Example

Status

Status Badges offer several variants that control the appearance of the Badge. The text for the Badge should be passed as children to the component. The text will be displayed in all caps.

Example

success

Tag

Tag Badges are, by default, non-interactable Badges that are intended to display tag names for entities. They only accept strings as children. If passed an href or onClick prop, the Tag Badge will be rendered as a button element.

Example

#PegaCosmos

Keyboard

Keyboard Badges are non-interactive Badges that indicate to a user an available keyboard shortcut. The symbol presented in a keyboard Badge will depend on which OS the user is on. Here is a list of all available keyName values:

  • Page up: Pg up
  • Page down: Pg dn
  • Ins: Insert
  • Control: ⌃ (Mac), Ctrl (Windows)
  • Command: ⌘ (Mac)
  • Option: ⌥ (Mac), Alt (Windows)
  • Return: ↵ (Mac)
  • Delete: Del (Mac)
  • Windows: ⊞ (Windows)
  • Backspace: Backspace (Windows)
  • Alt: ⌥ (Mac), Alt (Windows)

Example

Generally ⌘ is used as a modifier key

Related components

Properties

NameDescriptionDefaultType
variant*Determines the color to render the Badge as. This color is derived from the Theme.
'success' |'urgent' 

Custom theming

You can override the styles of the Badge component by setting a custom theme on the Configuration component.

Theme properties

{
          •           foreground: 'base.colors.green.dark', // → base.colors.green.dark
          •           background: 'base.colors.green.extra-light' // → base.colors.green.extra-light
          •         },
          •           foreground: 'base.colors.red.dark', // → base.colors.red.dark
          •           background: 'base.colors.red.extra-light' // → base.colors.red.extra-light
          •         },
          •           foreground: 'base.colors.orange.dark', // → base.colors.orange.dark
          •           background: 'base.colors.orange.extra-light' // → base.colors.orange.extra-light
          •         },
          •           foreground: 'base.colors.purple.dark', // → base.colors.purple.dark
          •           background: 'base.colors.purple.extra-light' // → base.colors.purple.extra-light
          •         },
          •           foreground: 'base.colors.slate.dark', // → base.colors.slate.dark
          •           background: 'base.colors.slate.extra-light' // → base.colors.slate.extra-light
          •         }
        •       },
        •         foreground: 'base.palette.interactive', // → base.palette.interactive
        •         background: 'base.palette.interactive' // → base.palette.interactive
        •       },
          •           foreground: 'base.colors.slate.extra-dark', // → base.colors.slate.extra-dark
          •           background: 'base.colors.slate.light' // → base.colors.slate.light
          •         },
          •           foreground: 'base.palette.light', // → base.palette.light
          •           background: 'base.palette.interactive' // → base.palette.interactive
          •         },
          •           foreground: 'base.palette.light', // → base.palette.light
          •           background: 'base.palette.interactive' // → base.palette.interactive
          •         },
          •           foreground: 'base.palette.light', // → base.palette.light
          •           background: 'base.palette.urgent' // → base.palette.urgent
          •         }
        •       },
          •           foreground: 'base.palette.dark', // → base.palette.dark
          •           background: 'base.palette.interactive' // → base.palette.interactive
          •         }
        •       },
          •           background: 'base.palette.urgent' // → base.palette.urgent
          •         },
          •           background: 'base.palette.success' // → base.palette.success
          •         },
          •           'border-color': 'base.palette.light' // → base.palette.light
          •         }
        •       },
        •         'background-color': 'base.colors.slate.extra-light', // → base.colors.slate.extra-light
        •         'border-color': 'base.colors.slate.light' // → base.colors.slate.light
        •       }
      •     }
    •   }
}