Modals give users informational or alert messaging. They 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.
- Use modals to display critical actions or notifications that users need to respond to.
- Use modals to give users information and let them make a selection before they continue. Don’t use a modal just to let a user perform a task. There are more elegant, less disruptive ways to present that in the interface.
Except for special cases such as an in-flow sign-up progress, we recommend using modals only for messaging. Instead of presenting a modal on top of a page or trowser to complete a task in context, 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, and display in a modal state.
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, modal messages consist of three elements: the information or alert, additional details if needed, and a call (or calls) to action. Depending on the design 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.”
Recommended voice and tone attributes: straightforward, encouraging, optimistic
- Information or alert:
Tell users what’s going on or show the data they need to see. Be honest and let users know what the system did, what they did, or what they’re about to do.
Recommended voice and tone attribute: straightforward
- More information (optional):
If we have information that helps users understand what’s happening, we can include an additional sentence. We usually want to keep modals brief, so more information is optional.Recommended voice and tone attribute: straightforward
- Call to action:
The call to action clearly lets users know what to do next. Keep these buttons brief and direct.
Recommended voice and tone attributes: straightforward, experienced, encouraging, optimistic