Modals and overlays

Overlaying data

There are times when you may need to work on additional items, or reveal more actions or visuals in a visually heavy screen. Below are the common ways to reveal this extra information.

Last updated: Jun 2017

Modal dialogs

Modals are used to work with large amounts of data that would need a new page to complete. Modals are great for wizards and long forms because they focus a user on the new task without switching context. Modals do not stack on top of each other, they all share a common Y-axis reveal, and they are as wide as the primary column on a split layout page.

Default modal style

Used on large screens and tablets. They fix themselves just below the header and expand downward as needed. They must leave at least 40 pixels of space at the bottom and scroll overflow content inside. Modals are the same width as the primary layout column in a harness and need dual "Cancel" actions, as some users miss the X in the top right corner to dismiss the modal.

Desktop modal example

Mobile modal style

On smaller mobile screens, the modal slides in from the bottom of the screen, covering both the content and navigation.

Mobile modal example

Last updated: May 2017

Overlays and tooltips

Overlays are used to show a small piece of related data or smaller flow for a specific element on the screen. They are highly flexible, and can be used in various ways. They are not meant to handle massive forms or wizard flows. Overlays can stack on top of other overlays and modals, provided they are launched from that overlay or modal.

Robust overlay

Overlays can be dismissed in three different ways: clicking the “cancel” button, clicking the X button in the header, or by clicking anywhere outside the overlay.

Robust overlay example Robust overlay without a header

Overlay as a tooltip

Here the overlay is acting like a tooltip, toggling when the element is hovered or focused. Overlays that function like this should not include actions or links.

Tooltip example

Overlay as menu options

Menu options example

Last updated: Jun 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: Case management