Your bookmarks

Dialog

Prompts users to take or complete an action.

When you have a simple action you want users to confirm, it can help to break them out of their main flow. Focus on the action using a dialog.

Dialogs cover any other content until the action is completed or canceled. Because they interrupt a user’s main flow, use as few as possible to minimize disruption. If you have more complex information to include, use a modal instead.

Component status

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

Content structure

Illustration: optionally adds visual context; title: sets the context and works best when short; description: adds more context and works best when short; primary action: sets the main action for the user to complete; secondary action: optionally sets another action to perform, usually cancelling/closing the Dialog.