Dialogs

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.

1. Dialog background
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

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