Skip to main content Skip to navigation Skip to search

Modals inform users about a task and can contain decisive information that requires immediate attention.

Usage

Use a modal when required to interrupt the user to address a specific critical task that needs immediate resolution.

When to use a modal:

  • To grab user’s attention for an important message.
  • To show additional information without losing the context of the parent page.
  • To break down a complex workflow into a series of less complicated steps.

When not to use a modal:

  • For nonessential information that is not related to the current workflow.
  • For complex workflows that require additional information not contained within the modal.
  • Avoid modal over modal. Context becomes confusing when modals are stacked.

Sizes

There are multiple sizes for modals. The default size is medium, however other sizes are available. Select the size best suited for the content and screen size displaying the modal. Remember to test responsiveness.

S
Small Modal Width: 288px Launch
M
Medium Modal Width: 576px Launch
L
Large Modal Width: 864px Launch
XL
X-Large Modal Width: 1152px Launch

Behavior

Consider using modals for the following scenarios: alerting the user, confirmation dialogs, and task-oriented workflows.

Dismissing modals

A user needs to actively dismiss a modal. A modal should not disappear on its own. Taking any of the actions to either cancel or proceed should eventually dismiss the modal.

There are multiple ways to dismiss a modal but a user needs to intentionally make that choice.

Clarity modals are not dismissed when clicking on the background overlay. This prevents losing information or data. An option to override this is available.

Image that shows multiple ways to dismiss a modal.

Stacking modals

Modals should not launch other modals. Stacking modals makes it hard to dismiss them and confuses the user on their levels of importance.

If you see a need to stack modals, you should:

  • Seek alternatives to the second modal such as inline expansion within the first one.
  • Seek alternatives to the use of modals in that scenario and explore alternatives such as inline task completion.
Image that shows multiple modals stacked on top of each other as an example for what not to do.