Modal dialog

Modal dialogs, also known as modals, communicate information using an overlaid window that allows users to remain within the context of their workflow, but demands their attention.

Modals are used for creating, editing, and completing local actions.

Modals allow users to remain within the context of their workflow. For example, a user may need to create a new case related to the one they are currently viewing. They may be minimized and “docked” to the bottom of the screen, allowing users to review or copy other application content directly into the modal while they work.

Modals are dismissible by default. They can also be closed via the escape key, or by clicking anywhere outside of the modal.

In the Constellation design system, modals may increase in size to fit wider content within. Additionally, modals are affixed to the top of the screen, so if content is conditionally shown as users work, the vertical position of the modal does not shift upwards. This saves users from re-orienting their view.

Confirm dialogs are displayed when users take an action that will result in a significant change, such as loss of data. For example, a confirm dialog can display when a user tries to leave a form that has unsaved changes.

Modals can be minimized to be re-opened at any point. When minimized, the modal heading will appear in the bottom right of the viewport. From here, the modal can either be closed, or re-opened by clicking on the header.

Modal dialogs that are used to confirm an action (for example, confirming that a user wants to discard their changes), should have matching or complementary modal header and primary button text. For example, if the modal header reads “Discard changes?”, the primary button text should read “Discard”.

No configuration is needed for this component in Constellation.

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

• Popover

• Toast

• Tooltip