Modals present contextual information or tasks without navigating the user away from the main task flow. Because they sit on an elevated layer and disable the layout behind them, they should be used for tasks and alerts that require the user's exclusive attention.

Variants

Standard Modal

Standard modals constitue a continuation of a user's task flow and are the most used modal type. They allow the user to review information or take action.

The required parts are a title, body content and associated actions. Body content in a modal may be plain text or contain interactive elements. Optionally, a standard modal may have a sub-header and a Close icon to dismiss the modal and return to the underlying screen.

Alert Modal

Alert modals interrupt or end a user's task flow to give critical feedback about the action they're trying to take or force an immediate action. The required elements are a feedback icon, a title, body content and a way to dismiss the modal. Alert modals have no associated states.

Information Alert Modal

Use information alert modals to direct the user on how to continue an interaction outside of the designed experience.

Warning Alert Modal

Use warning alert modals to warn of destructive action and ask for immediate user confirmation in instances where the action will lead to data loss. If warning feedback does not require user confirmation, use the Notifcation component instead.

Error Alert Modal

Use error alert modals to tell the user of an error that they cannot resolve on their own. Provide information within the body on how to proceed. If warning feedback is related to an action on the underlying page and can be fixed there, use the Notifcation or Inline Error components instead. To communicate a system error, use a full-page error layout.

States

Header

Optional sticky subtitle

Content Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar laoreet ligula in placerat. Quisque sed lacinia nulla. Nullam nec nulla nec tortor suscipit ullamcorper. Pellentesque dui dolor, varius sodales dolor sed, bibendum eleifend lorem. Maecenas ut dui quis lacus volutpat eleifend maximus a nisi. Curabitur lobortis elementum risus nec tincidunt. Nunc at libero porta, pretium velit non, interdum felis. Maecenas eget nulla accumsan, suscipit justo at, facilisis turpis. Pellentesque mattis justo eu tellus tempor posuere. Duis dignissim justo et magna congue, ut tincidunt erat sollicitudin. Pellentesque maximus pulvinar vestibulum. Aliquam erat volutpat. Nulla lobortis ante a hendrerit lacinia. Phasellus non efficitur nisl, eu malesuada ante. Nunc gravida eros vel sapien egestas, ac pellentesque urna fermentum. Nulla vitae ligula vel enim auctor ornare. Donec sit amet pharetra purus. Nunc lesuada arcu congue sit amet. Ut tempus ex et turpis auctor, id hendrerit felis volutpat. Curabitur elementum lacinia malesuada. Curabitur sed condimentum mauris. Fusce molestie, metus vel aliquet porta, odio lorem molestie ligula, sed vehicula risus tortor et justo. Nunc elementum libero eu condimentum scelerisque. Vestibulum tincidunt justo risus, nec gravida diam tempor sit amet. Vestibulum ultrices diam semper risus lobortis, a sodales metus accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum diam erat, tempus sit amet scelerisque et, vehicula non metus. Curabitur tincidunt id lorem non porta. In sed neque a odio fermentum pharetra eu sed neque. Cras justo tortor, aliquam at metus eget, tincidunt hendrerit odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar laoreet ligula in placerat. Quisque sed lacinia nulla. Nullam nec nulla nec tortor suscipit ullamcorper. Pellentesque dui dolor, varius sodales dolor sed, bibendum eleifend lorem. Maecenas ut dui quis lacus volutpat eleifend maximus a nisi. Curabitur lobortis elementum risus nec tincidunt. Nunc at libero porta, pretium velit non, interdum felis. Maecenas eget nulla accumsan, suscipit justo at, facilisis turpis. Pellentesque mattis justo eu tellus tempor posuere. Duis dignissim justo et magna congue, ut tincidunt erat sollicitudin. Pellentesque maximus pulvinar vestibulum. Aliquam erat volutpat. Nulla lobortis ante a hendrerit lacinia. Phasellus non efficitur nisl, eu malesuada ante. Nunc gravida eros vel sapien egestas, ac pellentesque urna fermentum. Nulla vitae ligula vel enim auctor ornare. Donec sit amet pharetra purus. Nunc lesuada arcu congue sit amet. Ut tempus ex et turpis auctor, id hendrerit felis volutpat. Curabitur elementum lacinia malesuada. Curabitur sed condimentum mauris. Fusce molestie, metus vel aliquet porta, odio lorem molestie ligula, sed vehicula risus tortor et justo. Nunc elementum libero eu condimentum scelerisque. Vestibulum tincidunt justo risus, nec gravida diam tempor sit amet. Vestibulum ultrices diam semper risus lobortis, a sodales metus accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum diam erat, tempus sit amet scelerisque et, vehicula non metus. Curabitur tincidunt id lorem non porta. In sed neque a odio fermentum pharetra eu sed neque. Cras justo tortor, aliquam at metus eget, tincidunt hendrerit odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar laoreet ligula in placerat. Quisque sed lacinia nulla. Nullam nec nulla nec tortor suscipit ullamcorper. Pellentesque dui dolor, varius sodales dolor sed, bibendum eleifend lorem. Maecenas ut dui quis lacus volutpat eleifend maximus a nisi. Curabitur lobortis elementum risus nec tincidunt. Nunc at libero porta, pretium velit non, interdum felis. Maecenas eget nulla accumsan, suscipit justo at, facilisis turpis. Pellentesque mattis justo eu tellus tempor posuere. Duis dignissim justo et magna congue, ut tincidunt erat sollicitudin. Pellentesque maximus pulvinar vestibulum. Aliquam erat volutpat. Nulla lobortis ante a hendrerit lacinia. Phasellus non efficitur nisl, eu malesuada ante. Nunc gravida eros vel sapien egestas, ac pellentesque urna fermentum. Nulla vitae ligula vel enim auctor ornare. Donec sit amet pharetra purus. Nunc lesuada arcu congue sit amet. Ut tempus ex et turpis auctor, id hendrerit felis volutpat. Curabitur elementum lacinia malesuada. Curabitur sed condimentum mauris. Fusce molestie, metus vel aliquet porta, odio lorem molestie ligula, sed vehicula risus tortor et justo. Nunc elementum libero eu condimentum scelerisque. Vestibulum tincidunt justo risus, nec gravida diam tempor sit amet. Vestibulum ultrices diam semper risus lobortis, a sodales metus accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum diam erat, tempus sit amet scelerisque et, vehicula non metus. Curabitur tincidunt id lorem non porta. In sed neque a odio fermentum pharetra eu sed neque. Cras justo tortor, aliquam at metus eget, tincidunt hendrerit odio.

Scroll

In addition to the default state, which indicates that a modal is in the top scroll position or there is no scrollable content, Standard Modals with lengthy body content can use a scroll state. When scrolling, the header and optional sub-header, as well as the footer bar, will elevate and remain persistent at the top of the container with the rest of the content scrolling behind.

Accessibility

Modals trap keyboard focus. Users must dismiss the modal, when possible, in order to return to the underlying page. Do not put information in a modal that necessitates the user interacting with information on the layout below. When the modal closes, focus should move back to the layout element that triggered it.

Design Environment

At larger breakpoints, modals take up 70% of the screen width, with a max-width of 710px. Modals can be dismissed in many ways: by clicking the scrim outside of the modal container, pressing the escape key, clicking the close icon or any dismissing action included in the modal. Modals should never trigger other modals.

Mircocopy

Modal titles should be concise and use key words to communicate a clear message. CTA text should be action driven and relate to the Modal title. Omit a CTA if the only available action is closing the modal. Instead, rely on the close icon.