Modals are used to present critical information or prompt the user for input
Modals, or dialogs, are stopping points in a user experience that intentionally introduce friction. They are disruptive by design. The purpose of a modal should be clear to the user as soon as it is presented, and a path to completion should be obvious.
Because of their intrusive nature, modals should only be used in a few situations:
Opening a modal should always be initiated by clicking a button. A modal should be expected by a user through a user-triggered action and should never open unprompted.
Modals are disruptive and cause friction. Only use them when intentionally disrupting a user flow or experience. Modals can annoy the user if they are used too frequently.
Within a modal, content length should be short and concise so as to fit within the browser’s viewport. Never use a modal to display a large amount of information or data. Modals should be simple to complete or dismiss and have a clear call to action.
When a modal is opened, focus should be placed on the modal’s container. Focus should also be trapped to the modal’s contents. The underlying page should be unfocusable and unreachable through keyboard navigation.
A modal should be closed when the following happens:
ESCkey is pressed
Cancelbutton in the modal’s footer is pressed
Xin the modal’s header is pressed