Modals contain a brief message and present at least one call to action that users must complete before the modal goes away. Since modals stop users from continuing, these messages are usually more important than the ones we display in page-level warnings or alerts.

Usage

Except for special cases, such as in-flow sign-up steps, we mainly use modals for messaging:

  • For sign-in and sign-up flows
  • To introduce users to how things work, especially for first-time use
  • To display important information users need to respond to. This is especially useful in cases when we need to make sure users want to take an action (such as deleting information) and when users need to make a decision or complete an important task at a specific time in their workflow.
  • To help users focus on an article, video, or image
  • For persistent alert messaging, such as when we want to remind users to complete an important action outside of their current workflow. Example: The user needs to update how often they file or make payments.

We usually try to limit the number of interactions in a modal. Don’t use a modal just to let a user perform a task. Instead, use stacking trowsers or a drawer, depending on the context.

Appearance and behavior

  • Modals come in three widths: 350, 530, and 600 pixels.
  • The background behind the modal is grayed out (60% opacity, black).
  • The border radius for the modal is 2 pixels.
  • If there is one call to action button, center it.
  • If there are primary and secondary calls to action, the primary call is always on the right, secondary on the left.
  • Modals appear using a fade in transition.
  • Modals should not be scrollable. We make an exception for when content is hidden behind the mobile softkeys. The modal component scrolls, but not the content inside.
  • Content behind modals should not be scrollable.
  • Don’t use controls such as checkboxes or dropdowns in 350-px modals.
  • Use the full-screen experience for modal typeahead in mobile.
Confirmation

One-button dialog

 

Two-button dialog

 

Three-button dialog

 

Critical alert

 

End-of-flow success validation

 

End-of-flow success validation with next steps – Option 1

 

End-of-flow success validation with next steps – Option 2

 

 

Examples

 

Responsive behavior

One-button dialog

Two-button dialog

Three-button dialog

Large modal

Critical alert

Content guidelines for modals

Like page-level messages, most modal messages consist of three elements: the information or alert, additional details if needed, and a call (or calls) to action. Depending on the pattern you use, the modal might also begin with a title.

  1. Title (optional):
    The title briefly introduces the information. Keep it succinct and simple, like “Connect your bank” or “Check your payment.”
  2. Information or alert:
    Tell users what’s going on or show the information they need to see. Be honest and let users know what the system did, what they did, or what they’re about to do.
  3. More information (optional):
    If we have information that helps users understand what’s happening or why, we can include an additional sentence. We usually want to keep modals brief, so more information is optional.
  4. Call to action:
    The call to action lets users know what to do next. Keep these buttons brief and direct.

Actions and controls

Demo

Launch Preview
x
px wide

  • Was this Helpful?
  •