Components

Notifications

Notifications are used to communicate with users in real-time while they are interacting with Pega applications. Specifically, they are used to show errors, warnings, confirmations, and system status.

When it comes to notifications, there are four message types.

Confirm/success messages should appear when the user has completed an action, or needs to see a message reinforcing a recent success.

Confirmation and success examples

General info/help messages messages should appear when the user needs further explanation or instruction to complete a task. It can also be used to highlight select information. However, screens should always be as clear and intuitive as possible, so that the user does not need to seek additional guidance in order to complete their task.

Information examples

Warning messages should appear when the user needs to be notified of a potential problem, but is still able to complete their task.

Warning examples

Error messages should appear when the user is required to take action in order to correct an issue, before proceeding or completing their task.

Error examples

Placing an “X” in the far right of the message is optional, and may be added to give the user the ability to dismiss the message after viewing.

Last updated: Mar 2017

Placement of notifications

Header bar type notifications should be used within an action area container. Notifications, errors and warnings should appear directly above the action area with no spacing between.

Header notification example

All notifications should stretch 100% across the space of the container.

Last updated: Mar 2017

Error handling

Errors can be communicated using the error notification style, or by directly highlighting a field. A field should be highlighted when the error results from incorrect or misused entry of data. A bar style notification should be used when problems exist in multiple fields.

Errors shown in close proximity to a specific field should include an icon directly to the left of a red text label indicating the nature of the error or action necessary.

All errors messages should follow the pattern of:

  1. A concise summary of the issue
  2. A suggested solution
Field input error example

Last updated: Mar 2017

Loading

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

Next: Content containers