Skip to main content

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.

A Modal containing a heading, body copy and a button placed on the bottom right corner.

Dos and Don’ts

Do
  • Use to inform users about a task can contain information, require decisions or involve multiple tasks.
Don't
  • 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

Anatomy of a Modal.
  1. Back (optional): The chevron Icon button allows the user to return back a stage in a multi-step modal.
  2. Title: Gives the users an overview of the content.
  3. Close (optional): The close Icon button will close the Modal without submitting any data.
  4. Main content: Open slot for any content required.
  5. CTAs (optional): Single or dual call to action buttons to outline the user’s next options.
  6. Overlay: Screen overlay that obscures the on-page content.

Variations

Default

Default variation of modal.

Modifiers

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.

A Modal with a back icon button in the header.

Close

Use this Header modifier when the Modal can be dismissed.

A Modal with a close icon button in the header.

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.

A Modal with dual buttons

Single

A single Button variant is available when only one action is required.

A Modal with a single primary button in its footer.

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.

A Modal with a pair of primary and ghost buttons in its footer.

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.

SizeBreakpointWidthMax heightMax width
Large>=768px75%100% height minus 80px top and bottom1080px
<768px75%100% height minus 80px top and bottom
Medium>=768px75%100% minus 80px top and bottom600px
<768px75% or 100% 100% minus 40px top and bottom or 100%
Small>=768px100%100% minus 80px top and bottom450px
<768px75%100% minus 40px top and bottom

Large

Large size modal.

Medium

Medium size modal.

Small

Small size modal.

Narrow

Sizes

Full screen

Large modals will expand to fill the entire page width at narrow viewports.

A fullscreen Modal on a mobile screen.

75% width

Medium and small modals will expand to 75% page width at narrow viewports.

A Modal with 75% width on a mobile screen.

Modifiers

As well as the standard Modal footer modifiers, at a narrow size you have the option to have full-width buttons that are stacked.

A Modal with a single primary button in its footer on a mobile screen.
A Modal with a single primary button in its footer on a mobile screen.

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.

Loading behaviour of a modal.

Layout

Position

Center

The Modal is positioned at the center of the screen by default.

A Modal that is positioned in the middle of the screen.

Top

The Modal is positioned at the top of the screen by default.

A Modal that is positioned at the top of the screen.

Overflow

Title

When the title exceeds the available width, it wraps onto a new line.

A Modal with a long title.

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.

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.

A Modal with a pinned footer.

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.

A Modal with an unpinned footer.

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.

A dismissible Modal with a close button.

Non-dismissible

If the Modal is not dismissible, the user has to complete the flow in order to close the Modal.

A non-dismissible Modal without a close button.

Examples

Outlines the atomic level interactive elements for the component.

LTR examples

Here are some examples of modals in a left-to-right context:

A left-to-right example of a Modal with form fields in the Modal body.
A left-to-right example of list items and buttons in the Modal body.
A left-to-right example of tabs and cards in the Modal body.

RTL examples

Here are some examples of Buttons in right-to-left context:

A right-to-left example of a Modal with form fields in the Modal body.
A right-to-left example of list items and buttons in the Modal body.
A right-to-left example of tabs and cards in the Modal body.

Resources

Stable
Stable
Beta
Stable
Stable
iOS JustUI [UI Kit]
Stable
iOS PIE [SwiftUI]
Stable
Android PIE [Compose & Views]
Beta