- Use to inform users about a task can contain information, require decisions or involve multiple tasks.
Modal
A modal is a surface that overlays the page’s main content and is used to display information, gather input or confirm actions.
Overview
The purpose of modals is to focus the user's attention on a specific task, message, or interaction, and to prevent interaction with other elements on the page while the Modal is active.
Modals are commonly used for tasks such as displaying notifications, presenting detailed information, requesting user input, or confirming critical actions.
Dos and Don’ts
- Modals interrupt a user’s flow by design, so while effective when used correctly, they should be used sparingly to limit disruption to the user.
Anatomy
- Back (optional): The chevron Icon button allows the user to return back a stage in a multi-step modal.
- Title: Gives the users an overview of the content.
- Close (optional): The close Icon button will close the Modal without submitting any data.
- Main content: Open slot for any content required.
- CTAs (optional): Single or dual call to action buttons to outline the user’s next options.
- Overlay: Screen overlay that obscures the on-page content.
Variations
Default
Modifiers
Header
Back
If a multi-step Modal is required, from steps two onwards a back Icon Button is displayed allowing the user to move back to the preview view.
Close
Use this Header modifier when the Modal can be dismissed.
Footer
You can replace the footer Buttons with any Button or Button pair defined within the Button guidance.
Double
A maximum of two Buttons are allowed within the Modal’s footer, with the primary Button right-aligned and the lower-emphasis Button on the left.
Single
A single Button variant is available when only one action is required.
Passive
You can use the Passive modifier for the footer in instances where the user doesn't need to take an action. This will remove the buttons at the bottom of the Modal.
Sizes
There are three responsive Modal sizes: large, medium and small. Choose a size that works best for the amount of Modal content you have.
Modals with short messages should use the small Modal to avoid long single lines; for complex or larger content, medium or large Modal will be more suitable.
| Size | Breakpoint | Width | Max height | Max width |
|---|---|---|---|---|
| Large | >=768px | 75% | 100% height minus 80px top and bottom | 1080px |
| <768px | 75% | 100% height minus 80px top and bottom | ||
| Medium | >=768px | 75% | 100% minus 80px top and bottom | 600px |
| <768px | 75% or 100% | 100% minus 40px top and bottom or 100% | ||
| Small | >=768px | 100% | 100% minus 80px top and bottom | 450px |
| <768px | 75% | 100% minus 40px top and bottom |
Large
Medium
Small
Narrow
Sizes
Full screen
Large modals will expand to fill the entire page width at narrow viewports.
75% width
Medium and small modals will expand to 75% page width at narrow viewports.
Modifiers
Footer
As well as the standard Modal footer modifiers, at a narrow size you have the option to have full-width buttons that are stacked.
Behaviours
Loading
In order to keep the size consistent when the content inside the Modal is loading, we have set a fixed height of 360px while the loading spinner is visible.
Layout
Position
Center
The Modal is positioned at the center of the screen by default.
Top
The Modal is positioned at the top of the screen by default.
Overflow
Title
When the title exceeds the available width, it wraps onto a new line.
Body content
When the Modal’s content is longer than the available Modal height, then the body section should scroll vertically with the header, and a footer fixed in place. Modal content should never scroll horizontally; instead, use a larger size modal.
Footer pinned = true
If the actions are required to be sticky, they are pinned to the bottom of the Modal container whilst the user scrolls to indicate there is more content below.
Footer pinned = false
If the actions aren’t required to be sticky and are placed at the bottom of the content, the passive footer is pinned to the bottom of the Modal container whilst the user scrolls to indicate the presence of additional content below.
Interactions
Close
Dismissible
If the Modal can be dismissed by the user, they should be able to dismiss it by clicking the close Icon Button or anywhere on the overlay. Doing this will close the Modal.
Non-dismissible
If the Modal is not dismissible, the user has to complete the flow in order to close the Modal.
Examples
Outlines the atomic level interactive elements for the component.
LTR examples
Here are some examples of modals in a left-to-right context:
RTL examples
Here are some examples of Buttons in right-to-left context:
Resources
| Available | |
| Available | |
| Alpha | |
| Available | |
| Available | |
 iOS JustUI [UI Kit] | Available |
 iOS PIE [SwiftUI] | Available |
 Android [XML views] | Available |
 Android [Jetpack compose] | Available |
