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.


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.

1. Dialog background
2. Card header
3. Content area
4. Card action area


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



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


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


Element Size (dp)
Dialog width Margin / 706 max
Primary icon 44
Card header 76
Card action area 76


Dialog with title - day
Dialog with title - night
Scrollable dialog - day
Scrollable dialog - night
Dialog in action