COMPONENTS

Modal

A modal dialog displays critical content on top of the page in a separate container and requires user action.

Modal Intro
Modal Anatomy
  1. Header
  2. Inner Content Container
  3. Footer
  4. Title
  5. Close
  6. Scrollbar
  7. Action buttons
  8. Outer Container
  9. Elevation

The header can have two variations – title only or title with subtitle.

Modal Variations Header

The footer can vary depending on the number of actions that need to be shown to the user.

Modal Variations Footer

A modal is always centered horizontally within the viewport and has two options for vertical alignment – top or centered.

Modal Alignment

A transparent overlay separates the page and the modal.

Modal Overlay

A modal can be set to have a scrollable inner content container. The inner scrollbar will only appear if the content extends beyond the viewable area. The modal outer container is set to have a maximum height equal to 80% of the viewport. The footer is always anchored to the bottom of the outer container to ensure that the action buttons are always accessible.

Modal Scrollable Behavior

A modal can be set to be either dismissible or non-dismissible. Dismissible modals allow the user to close the modal and return to their prior page by clicking anywhere outside the modal or by clicking the close icon. Non-dismissible modals do not allow the user to close the modal without explicitly selecting one of the action buttons shown in the footer.

Modal Dismissible Behavior

The modal outer framework is built to scale across all breakpoints. If a modal contains complex inner content such as a form, that content should also be optimized across all supported breakpoints.

Modal Responsive Layout Form

Modal is available in three sizes — large, medium, and small.

Modal Sizes

Below are some examples showing the types of content that could populate the inner content container of a modal.

Modal Examples
  • When writing for modals, reference the Writing Guidelines.
  • Modals are disruptive and should be used sparingly.
  • Do not use for important error notifications, instead use Alert.
  • Do not use for short messaging confirming successful interactions such as "Email sent", instead use Alert or Toast.
  • Avoid using modals on top of modals.