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 dismissible by default (and render with a close action in the top right). They can also be closed via the Esc key, or by clicking anywhere outside of the Modal. They also may be minimized and “docked” to the bottom right of the screen, allowing users to grasp application data needed to complete work in the modal.

In Cosmos React, modals may increase in size to fit table content inside.

Modals are used for creating new cases and editing existing cases.

Modals in Cosmos offer several critical benefits for users, including:

  • 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. A model—and the subsequent toast notification—gives the userthe option of seeing the newly created case, or staying on the previously worked case. This adjacent creation workflow is common in case management applications.
  • Minimize context-switching between multiple screens.
  • Offer more clarity than inserting a creation form in an otherwise empty case page template.
  • Offer a clear exit strategy to return to previously used screens. This is especially important when creating new cases.
  • Allow minimizing, which allows users to review or copy other application content into the current workflow.
  • Are a familiar and easy-to-learn pattern often used within enterprise and consumer applications and operating systems.

This is an example of Modal component created for a change event.

A Modal component may be rendered as an alert. Alerts may not be dismissed except for by an explicit action within the Modal. The alert version of the Modal component requires the user to take an action. A Close button appears in the top corner. The typical alert Modal component contains 2 (max 3) possible actions.

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.