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.
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.
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.
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
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.
- Title (optional):
The title briefly introduces the information. Keep it succinct and simple, like “Connect your bank” or “Check your payment.”
- 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.
- 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.
- Call to action:
The call to action lets users know what to do next. Keep these buttons brief and direct.
Actions and controls
In mobile, use the full-screen experience for modal typeahead.
Don’t make modals scrollable. The only exception for this is when content is hidden behind the mobile softkeys. The modal component scrolls, but not the content inside.
Don’t make the content underneath modals scrollable.
Don’t use controls such as checkboxes or dropdowns for 350-pix wide modals.
Don’t display more than 2 input fields or dropdowns.
Don’t use more than 1 checkbox inside a modal.
Don’t dismiss modals automatically. Users need to take action for a model to disappear.