Key Points
- Modals should be used when the user is presented with information that is short, concise, and can be displayed inside a single dialog box or a height smaller than the viewport
- Modals block out the content on the level below with an overlay
- Modals are dismissed either using the close button or pressing the escape key
- On wider breakpoints the modal has a fixed max-width of 520px
- If you require custom content or the height is longer than the viewport, use an overlay dialogue
Usage
Modals are containers that have a title, text summary and button groups. They aim to block the users flow and present information or ask them to make a decision.
Although they can contain any content that uses these elements there are a number of patterns that have a common composition.
Notifications
The key element here is that there are no button groups. The user is presented with a message that they can dismiss.
Decisions
Using a button group pairing the user has to make a decision before they can dismiss. Any button group pairing could be used here.
Confirm or Cancel
Unlike the decision example the user can opt to do nothing and they are presented with a close icon alongside a cancel button.