Occasionally, an entire area needs a large banner notice stating there is an issue, success, or major status change. These are to be used sparingly and only for important information. They grow in from 1px tall to the height of the notice.

Notifications come in six different varieties.

  • Blue — Used for general information.
  • Light red — Used for errors, issues, and negative notices.
  • Green — Used for success or positive notices.
  • Marigold — Used for warnings, but not errors.
  • Purple — Used for something that may be inactive, withdrawn, or deprecated.
  • Strong red — Used for only the most serious of messaging such as critical failures and the like, typically at the app-level.
Notification styles example

Placement of notifications

Section notification

This is the most common usage. Section notifications are used when they affects the data in that section only. They are often non-dismissable.

Section-level example

Case-level notification

These notifications are used when they affect the entire case itself. They are typically non-dismissable.

Case-level example

App-level notification

These notifications are used when the application as a whole must inform the user of something. They are typically non-dismissable and use the critical style.

App-level example

Last updated: May 2017


Users need to be informed if they are offline (or have otherwise lost their connection) so they know their data isn't currently syncing.

Offline indicator example

Any element that is not able to refresh because it is offline should show a custom state to inform the user of this status and is presented as an empty state. The icon and text can be customized for the needs of a specific application, but the treatment should remain the same. In the next release, the loss of connection icon will be added to the core icon font.

Section with no connection example

Last updated: May 2017


When an action takes more than 0.3 seconds to process, a loading or working animation is recommended to keep the user informed. The default animation for use in Pega applications is a grid of spheres in motion.

When only horizontal space is available, a reduced version is shown instead.

Last updated: Mar 2017

Get the files

Want to begin working with the Pega Design System? Download the vector assets below.

Download design files

Last updated: May 2017

Next: Navigation