Components
Modal
Definition
Modals are child windows which appear in front of the main window to provide urgent information, or ask for information, or ask for a decision while keeping the user's current context. Modals demand a user's attention and must be acted upon or dismissed before a user can continue working in the main window.
Modals are disruptive and can annoy users. Therefore, they should be used sparingly and kept brief, without multiple steps. They should be user initiated unless an urgent system message needs to be seen and acknowledged.
Common Characteristics
All modals appear on a 50% opacity black background, and will contain content plus an action. Modals may only have one or two actions. Headings are optional.
Users may close any modal by clicking on the main window, or keyboard ESC, or “X”, or an action button.
Modals are centered with the main page and appear near the top of the main page—80px from the top for XS, S, and M breakpoints; and 120px from the top for L, XL, and XXL breakpoints.
Large modal with a confirming and dismissing actions.
Usage Guidelines
Modals are disruptors which are known to annoy users in many cases, so use them sparingly. Only use modals for brief processes when maintaining the user's current context is important. For long processes with multiple steps or options, consider a new page or full-page overlay.The optimal use cases for modals are:
-
1. When the user is about to take an action that has serious consequences and is difficult to reverse.
2. When a small amount of information must be collected, or permission granted, or decision confirmed before the user can continue in a process.
3. When an urgent system status change or failure must be noticed by the user.
Modals should only include one or two actions. If one, it must be an acknowledgement action (e.g. “OK”). If two, one must be a confirming action, and the other a dismissing action. (e.g. “SUBMIT” and “CANCEL”).
Do not use modals for error, success, or warning messages. These are best communicated in-page with a messaging component. Avoid system generated modals unless communicating an urgent system status change (e.g. connection lost, process failed).
Small modal with an acknowledging action.
Interaction
When a modal is open, all functionality on the main window should be disabled including scrolling. Also, avoid scrolling content within a modal. If scrolling can't be avoided, lock the action buttons in view.
Accessibility
When opening a modal, save the last element interacted with in the main window. Move keyboard focus to the modal, and trap focus in the modal until it is dismissed. When the user closes a modal, keyboard focus should be restored to the element that opened the modal, not to the top of the page. Allow the user to dismiss a modal using the keyboard's ESC key, or by clicking the main window, or by clicking close (“X”).