Material 3 Dialogs

Back to Components

Dialogs provide critical information and decisions in a user flow, featuring Level 3 elevation, standard 28dp shape tokens, and smooth M3 entry/exit motion.

1. Basic & Confirmation Dialog

Standard modal dialog with headline, body, and action buttons.

Open Basic Dialog
Delete item?
Are you sure you want to delete this file? This action is permanent and cannot be undone.
Cancel Delete

2. Alert Dialog (`type="alert"`)

Alert dialogs interrupt the user with urgent information. They have role="alertdialog" and cannot be dismissed by tapping the backdrop scrim.

Open Alert Dialog
warning
Discard unsaved draft?
You have pending changes that will be lost forever if you discard them now. Tapping outside the dialog will not dismiss it.
Keep Editing Discard

3. Stacked Actions (`stacked`)

For long action button labels, buttons stack vertically with the primary confirming action above the dismissive action.

Open Stacked Dialog
Turn on backup?
Photos and videos will be saved automatically to your Google Photos cloud library.
Don't Back Up Turn On Cloud Backup

4. Scrollable Dialog with Dividers

When content overflows, vertical scrolling is activated, and 1dp dividers dynamically appear beneath the headline and above the actions.

Open Scrollable Dialog
Terms and Conditions

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Decline Accept

5. Full-Screen Dialog (`fullscreen`)

Full-screen dialogs fill the entire viewport for complex workflows and form tasks.

Open Full-Screen Dialog
Create Event

This dialog spans the full viewport (100% width and height, 0dp corner radius, 0 elevation).

Fill out the details below before saving your new calendar event.

Discard Save
Last Action: None