Dialogs inform users about a specific task and may contain critical information or require decisions.
Dialog types include toasts (informational messages), alerts (which require acknowledgement), and confirmation dialogs (which require users to confirm a choice). Because dialogs are interruptive, they should be used sparingly. They retain focus until dismissed or until a required action has been taken.
Anatomy
Dialogs contain text and UI controls. Because users must respond to them, they should never be obscured, either by other elements or by the screen edge.

2. Card header
3. Content area
4. Card action area
Specs
Toast (informative message with no action required)

Dialog without title

Dialog with title

Dialog with centered title

Scrollable dialog

Toast – dialog placement

Toast – bottom placement

Styles
Typography
Type style | Typeface | Weight | Size (dp) |
---|---|---|---|
Body 1 M | Roboto | Medium | 32 |
Body 1 | Roboto | Regular | 32 |
Body 3 M | Roboto | Medium | 24 |
Body 3 | Roboto | Regular | 24 |
Color
Element | Color(day mode) | Color (night mode) |
---|---|---|
AOSP accent color | #66B5FF | #60A8F0 |
Primary type / icons | White | White @ 88% |
Secondary type / icons | White @ 72% | White @ 60% |
Dialog background | Grey 868 | Grey 900 |
Dialog background scrim | Black @ 78% | 10dp bkg blur | Black @ 84% | 10dp bkg blur |
Sizing
Element | Size (dp) |
---|---|
Dialog width | Margin / 706 max |
Primary icon | 44 |
Card header | 76 |
Card action area | 76 |
Examples




