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

Layout labels

Definitions of E, M, KL, P, Flex

Buttons component

Specs, style guidelines, and more

List items component

Specs, style guidelines, and more

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 guidelines

Scale and grid references, typographic examples, and more

Color guidelines

Palettes, elevation and opacity values, and more

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