Introduction
Modals present secondary, non-critical information to the user, requesting rather than requiring the user's input or interaction. They overlay the interface, but can be closed by either interacting with its content, closing the modal via the close-button or clicking outside of the modal.
Given that modals can disrupt the user's flow, it's essential to use them sparingly. Implement them only when there is either secondary information to the user's current flow or as a means for marketing elements.
- Use modals if you offer the user secondary information to their current flow, e.g. options for replacing an unavailable product in their cart.
- Modals can also be shown to the user for marketing purposes, e.g. to present the user with the option to subscribe to a newsletter.
Usage
Use a modal to display non-critical, secondary information or for marketing purposes.
Modals are not to be used for any critical, high priority information or or tasks. Use an alert dialog instead.
Modals should be placed in the center of the screen on any screensize bigger than mobile. The background overlay should be set to neutral.default at 50% transparency.
Don't position modals off-center or on any coloured overlays.
Mobile Specs
Also known as
Modal overlay, overlay, modal window