Your bookmarks

Modal

Forces users to complete an action before continuing.

Sometimes there’s an action you want a user to take but it’s not a part of their main flow. Force them to focus on a single action by using a modal.

Modals cover any other content until an action is completed or the modal is dismissed. Because modals interrupt a user’s main flow, use as few as possible to minimize disruption. If you have only a single simple action, consider using a dialog.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Sketch
Released

Content structure

Title: sets the context and works best when short; illustration: visually supports the message; suppressed section: optionally adds options or explanations and can include more complex structures; section: optionally adds options or explanations and can include more complex structures; footer: optionally adds an area for actions or next steps and can be fixed to always appear; close button; optionally enables users to close the modal.