Modal

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

---

Anatomy

1. Header (optional): Adds content to the header. Choose from illustration or imagery.
2. Back (optional): The chevron icon button allows the user to return back a stage in a multi-step modal.
3. Title: Gives the users an overview of the content.
4. Close: The close icon button will close the modal without submitting any data.
5. Main content: Text input or open slot for any content required
6. CTAs (optional): Single or dual call to action buttons to outline the user’s next options.
7. Checkbox (optional): Confirmation checkbox for the primary button.
8. Footer content (optional): Text can be added to the footer below actions.
9. Overlay: Screen overlay that obscures the on-page content.

---

Variants

Colours

Select from a palette of distinct brand colours for the Modal.

Neutral - alternative

02 Orange

03 Cupcake

03 Cupcake subtle

04 Berry

04 Berry subtle

05 Turmeric

05 Turmeric subtle

06 Aubergine

06 Aubergine subtle

08 Latte

08 Latte subtle

---

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.

Header Content

Header may include an illustration or an image.

Body content

The body can be toggled on and off and may include text or an open slot to add in a specified design.

Footer content

The footer may include buttons stacked or side-by-side buttons, with the option of adding footer content in the form of either a text input or a slot to add specified content.

Emphasis

Emphasis through colour

Depending on the level of visual prominence you want to give to the Modal, you can choose between strong or subtle emphasis.

Text

The title can be changed to italic for more prominence.

Footer

You can replace the footer Buttons with any Button or Button pair defined within the Button guidance.

Dual actions

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.

Checkbox confirmation

The checkbox control means users must select and acknowledge the required information before proceeding. The primary button remains disabled until the checkbox is checked.

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.

---

Imagery usage

Sizes

Narrow modal

The Narrow modal component supports three fixed aspect ratios for imagery. To prevent improper cropping, ensure all images are created to match one of the following ratios:

• Small: 3:1
• Medium: 16:9
• Large: 4:3

Wide modal

The wide modal component supports three fixed aspect ratios for imagery. To prevent improper cropping, ensure all images are created to match one of the following ratios:

• Small: 4:1
• Medium: 3:1
• Large: 21:9

Large

Overrides

Title

1. Title: Title can be overridden to use any of the Heading font tokens. As a default state, the title will use Heading M / Narrow. When the prominent toggle is engaged, Heading XL / Narrow italic is applied.

Buttons

1. Buttons: The Button’s size can be decreased, and their variant can be changed. But all changes must adhere to the button pair guidelines if they are kept as a pair, including the size of both buttons remaining consistent.

---

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.

Large

Medium

Small

---

Narrow

Sizes

Full screen

The wide large and optionally medium size, has the corresponding responsive option of fullscreen at narrow.

75% width

The wide small and optionally medium size, has the corresponding responsive option of 75% width at narrow.

---

Content

Overrides

1. Buttons: The Button’s size can be decreased, and their variant can be changed. But all changes must adhere to the button pair guidelines if they are kept as a pair, including the size of both buttons remaining consistent.

---

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.

Checkbox confirmation

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.

Disabled continuation

The continue button remains disabled until the user selects the checkbox, ensuring they acknowledge the required information before proceeding.

Error on attempted submission

If the user tries to continue without selecting the checkbox, it enters an error state with assistive text, guiding them to complete the required action.

Slot

Our Dialogs use Slots which ensure the component is flexible without the need to detach it from it’s original instance. If you want to learn more about slots and how to use them, please check the Slots documentation.

Quick guide for working with slots

Slots within components can be swapped for any type of content. Here are the steps you need to take when working with slots within your components:

1. Create a new frame.
2. Design the contents that will replace the slot inside the new frame.
3. Once you’re happy with the contents, make it a ❖ component (Cmnd+Alt+K).
4. Give your component a meaningful name so you can find it during step 5.
5. Select the nested Slot within the original component and replace it with the component you created.
6. Make sure your new component uses Auto layout so it can be resized properly.

Slots available

1. Body Slot: Available as a variant
2. Footer slot: Hidden by default

---

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.

Checkbox confirmation

When the checkbox label exceeds the available width, it wraps onto a new line, and the height of the footer is increased, with all content remaining centre aligned.

---

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

Figma Web Component	Stable
Figma Web Documentation	Stable
Figma App Component	Stable
Figma App Documentation	Stable
Web Components	Stable
Vue [Fozzie]	Stable
React [Snacks]	Stable
iOS JustUI [UI Kit]	Stable
iOS PIE [SwiftUI]	Stable
Android PIE [Compose & Views]	Beta