Modals
Overview
Definition
A piece of important information displayed over the main page’s content to force people to pay attention and take action.
Similar or related Components
- Side sheet (coming soon)
- Notification banners
Guidelines
Since modals interrupt the person’s main goal, they should be used sparingly. They must provide a way for someone to get out of or close the modal. This could be through a simple close button or multiple button options.
Everything on the main page, that’s under the modal, will be inactive until the person closes the modal. This is one of the main reasons to use modals sparingly.
Most common use cases for modals are:
- Notify a user about an important issue
Slightly different than a notification banner, these are when someone is within their flow and something happens to the system that needs to be addressed as soon as possible or is an issue that was created by a user and they need to fix the problem. - Verify a user’s decision
This could be used at the beginning of a flow to determine path or at end of the flow for anything that is extremely important or could cause something destructive. If issues happen a lot, it would be better to have one modal at the end to address all problems or determine if there is another method to communicate problems.
Content
Do
Keep the content brief but detailed with the appropriate way to fix the issue, move forward, or close the modal.
Do
Match the header to the main CTAs. If you ask a question in the header, make sure the CTA answers it.
Caution
You don’t always need to add body copy in the modal, as long as you have a headline and a way to close the modal.
Interactions
Modals are activated by a person’s action. This could be on a button, link, icon, or something similar. If it’s a keyboard, it will most likely be “enter” or “return”.
Do
Have a way for someone to close the modal.
Visuals
- If you need to use more than 75% of the view height to help people solve the problem, it may be better to use a full-screen modal.
Do
Darken the main page content, so the focus is on the modal.
Visually the container looks like a card over a darkened and inactive view of the main information. You can add almost any component within the modal, but make sure it’s actually needed to fix the main issue.
Don’t
Don’t hide how to close or exit a modal.
Do
Change the size of the modal to reflect the complexity of content. If it’s a quick verification, it shouldn’t be over 500px.
Do
Float the modal to the center of the browser window.
Specs
These are very basic styling specs. You can adjust from these to suit the user/feature needs.
| Border radius | border-radius-md |
| Interior padding | spacing-05 |
| Headline type size | headline-paragraph-lg |
| In-body headline size | headline-paragraph-md |
| Dropshadow | shadow-200 |
| Color overlay | $ink-800 50% opacity |
| Min-width | 320px |
Accessibility
- Everything within the modal is accessible with screenreaders and keyboard commands.
- The information under the modal does not need to have AA contrast, since that information does not need to be legible, only the content in the modal needs to have the correct contrast ratio.