Close popover
Raghavan S.K. (skr01)
Technical Lead - Front End
Pegasystems Inc.
skr01 Member since 2013 3 posts
Posted: October 7, 2020
Last activity: October 8, 2020

Creating status badges

Pega design system defines status badges as below:

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.

 We often come across many use cases of status badges, but how we configure them in our application? Is there any OOTB control for this? Are there any helper classes? We are going to see the same in our current post.

To clear the air, there is no dedicated control as such for showing the status badge but this can be easily achieved with the help of:

  1. Formatted text (OOTB control)
  2. Badge text
  3. badge-bg-* helper classes 

Step 1:

Drop in the Formatted text (you can see it as just Text in property panel) in the section. You can configure either through a property or just as constant as shown below:

Status badge configuration


Step 2:

Now choose "Badge text" fromat in control format

Step 3:

Choose the relevant helper class like badge-bg-info or badge-bg-wait etc ( Can we know how many of such helper classes are there OOTB? Sure will touch upon them little later)

Badge helper class & format

That is it! You should be able to see the status badge in your application. But what are the different OOTB helper classes available for status badges? 

Badge helper class Color
badge-bg-info #179595
badge-bg-wait #6839A8
badge-bg-old #585B73
badge-bg-warn #FD6000
badge-bg-good #20AA50
badge-bg-bad #D91C29
bg-badge-offline #A6020D

Applying these helper classes in,


UI-Kit status badges



Theme cosmos status badges

Hope this article helps. Happy coding!


Pega Platform User Experience Front-End Developer Developer Knowledge Share