Back control
Modal Heading
Meta Data
Super Header
Dismiss control
Content
Actions
The background overlay should always cover the entire browser window. The width and height of the content container may be adjusted depending on the content.
Width
Small:
max-width: 348pxMedium:
max-width: 648pxLarge:
max-width: 948pxX-Large:
max-width: 1248pxFull Width:
100%of the page width and height with no padding or border radius around the content.
Height
Default: The content container is vertically centered and the height is determined by the amount of content
Full Height: The content container stretches the full height of the modal with
32pxof space on the top and bottom
View Controls
Additional Content Controls will be display at the bottom of the header.
Tabs: Groups related modal content at the same hierarchical level.
Step Progress Bar: Displays the modal steps in a specific process and indicate the user's progression though the steps.
Control Bar: Modals containing tables or other information and data that a user can interact with by customizing, saving, exporting, or filtering the data in a particular way
1. Usage
Use modals sparingly. Modals are purposely interruptive and should only be used for content that requires the users full attention.
2. Decisions
Decision modals should not be use to display simple help text, notifications or confirmations. For these types of messages, consider using Message cards or Flash messages.
3. Information
Information modals should only be used for complex content. For simple content, consider using a side panel to allow the user to continue interacting with the page content.
4. Tasks
Task modals should only be used for complex tasks with multiple inputs. For smaller tasks with a single input, consider using a popover or an in-line edit mode.
5. Full Width Modals
Full Screen modals should be used for modals containing complex data or critical workflows. This will help the use focus on modal content without the distraction of the page underneath.
6. Single Action
Task modals with only one action should use a primary button. This button should be aligned to the left side of the footer.
7. Back Control
When the user has advanced a step in a workflow or navigated down a level in the modal hierarchy, then a back control button may be provided.
Information modals
Information modals contain a lot of information or very complex information. Examples of information modals would be lists of reports, a user’s contact information, or deal details. These modals don’t require user action, though there can be buttons that allow the user to do something, such as Edit. They can also include a button that allows the user to exit, which should be labelled Close.
Information modals can include super headers. The super header indicates the type or category of the item that the user is looking at. For example, Property, Vendor, or Contact. The main heading for these types of modals should be the name of the selected item itself, so the super header provides a general description of the modal.
Task modals
Task modals should be used for complex tasks with multiple inputs. The heading conveys the purpose of the modal and the action that users can expect to take. It should align with the button. Keep the heading as short as possible while clearly describing the modal. In general, these types of modals do not require super headers.
For confirmation modals, the heading should take the form of a question. See Confirmation Messages.
The button should allow the user to complete the action, confirm their choices, or acknowledge their understanding of the modal’s content. The button label should align with the action described in the modal header.
Related Components
Additional Reading
Modal & Nonmodal Dialogs: When (& When Not) to Use Them https://www.nngroup.com/articles/modal-nonmodal-dialog/
10 guidelines to consider when using overlays / modals http://www.uxforthemasses.com/overlays/