A modal disables the rest of the interface, is always dismissible, and comes with optional actions. Modals are often abused, so use them with care. (Maybe consider alerts and overlays while you're at it.)
Sizes differ only in width, not height. Height is determined by how much content appears in the modal.
Default: The majority of our modals are default. Use this size for one column of content, scrollable or not.
Regardless of the size you choose, the modal should never extend beyond the boundaries of the screen.
A modal’s content is typically one of two types: plain text or a checklist/form field.
Use plain text to confirm an action initiated by the user. Their only interaction with the modal will occur in the footer (Primary Action, Secondary Action or Cancel).
The plain text should be clear, complete sentences guiding the user toward their preferred course of action. Avoid rhetorical questions.
Use a checklist or form field to help the user add, remove or customize items. The checklist would provide a list of existing options while a form field allows them to enter new details.
The default size for all modal buttons is medium, though some occasions call for small, never large. Each modal can have up to three buttons: primary action, secondary action and cancel.
Calls-to-action and other button microcopy should reflect what appears in the modal title. Be sure the verb explains the purpose of the modal. For more info on title-to-CTA congruence, check our Microcopy Guidelines.
Instead of using modals on mobile, design separate interfaces using modal view if required. The only interjection of this type on mobile should be an alert, following their guidelines. The disruption to the experience should be confined to alerts only. Information traditionally accessed through a modal can be integrated more elegantly.
Sticking to our Microcopy Guidelines, all modal titles should use title case and prioritize keywords. Avoid questions as much as possible.
Don'tmake it so playful the purpose isn’t clear.
Docall out the action they’re taking.
Don'tdisconnect the title from the CTA.
Domake sure it’s congruent to the button copy.
|No guidelines exist for Windows (yet).|