Component

Material Design 3 dialogs tokens

Browse tokens

Token

See more values

Compare token values by selecting another context

Theme
Contrast
More contexts
Platform
Audience
What do 1P and 3P mean?

1P means first-party; 3P means third-party. We interpret 1P Baseline as the configuration for Google's own products, and 3P as the configuration for other developers.

Material supplies these audience labels but does not define them in the captured data. They are not a baseline-versus-Expressive switch.

Font

Enabled
Container
Container tokens
TokenValue
Full screen dialog on-scroll container colormd.comp.full-screen-dialog.header.on-scroll.container.color
#F3EDF7
Full screen dialog container colormd.comp.full-screen-dialog.container.color
#FEF7FF
Full screen dialog container elevationmd.comp.full-screen-dialog.container.elevation
0dp
Full screen dialog container shapemd.comp.full-screen-dialog.container.shape
0dp
Full screen dialog header container heightmd.comp.full-screen-dialog.header.container.height
56dp
Full screen dialog header container colormd.comp.full-screen-dialog.header.container.color
#FEF7FF
Full screen dialog header container elevationmd.comp.full-screen-dialog.header.container.elevation
0dp
Full screen dialog header container surface tint layer colormd.comp.full-screen-dialog.header.container.surface-tint-layer.color
#6750A4
Full screen dialog header on scroll container elevationmd.comp.full-screen-dialog.header.on-scroll.container.elevation
3dp
Full screen dialog action bar container heightmd.comp.full-screen-dialog.action-bar.container.height
56dp
Full screen dialog action bar container colormd.comp.full-screen-dialog.action-bar.container.color
#FEF7FF
Full screen dialog action bar container elevationmd.comp.full-screen-dialog.action-bar.container.elevation
0dp
Full screen dialog action bar on scroll container elevationmd.comp.full-screen-dialog.action-bar.on-scroll.container.elevation
3dp
Label text
Label text tokens
TokenValue
Full screen dialog header action label text fontmd.comp.full-screen-dialog.header.action.label-text.font
Roboto
Full screen dialog header action label text line heightmd.comp.full-screen-dialog.header.action.label-text.line-height
20pt
Full screen dialog header action label text sizemd.comp.full-screen-dialog.header.action.label-text.size
14pt
Full screen dialog header action label text weightmd.comp.full-screen-dialog.header.action.label-text.weight
500
Full screen dialog header action label text trackingmd.comp.full-screen-dialog.header.action.label-text.tracking
0.1pt
Full screen dialog header action label text typemd.comp.full-screen-dialog.header.action.label-text.type
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
Full screen dialog header action label text colormd.comp.full-screen-dialog.header.action.label-text.color
#6750A4
Full screen dialog action bar label text fontmd.comp.full-screen-dialog.action-bar.label-text.font
Roboto
Full screen dialog action bar label text line heightmd.comp.full-screen-dialog.action-bar.label-text.line-height
20pt
Full screen dialog action bar label text sizemd.comp.full-screen-dialog.action-bar.label-text.size
14pt
Full screen dialog action bar label text weightmd.comp.full-screen-dialog.action-bar.label-text.weight
500
Full screen dialog action bar label text trackingmd.comp.full-screen-dialog.action-bar.label-text.tracking
0.1pt
Full screen dialog action bar label text typemd.comp.full-screen-dialog.action-bar.label-text.type
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
Full screen dialog action bar label text colormd.comp.full-screen-dialog.action-bar.label-text.color
#6750A4
Icon
Icon tokens
TokenValue
Full screen dialog header icon colormd.comp.full-screen-dialog.header.icon.color
#1D1B20
Full screen dialog header icon sizemd.comp.full-screen-dialog.header.icon.size
24dp
Headline
Headline tokens
TokenValue
Full screen dialog header headline colormd.comp.full-screen-dialog.header.headline.color
#1D1B20
Full screen dialog header headline fontmd.comp.full-screen-dialog.header.headline.font
Roboto
Full screen dialog header headline line heightmd.comp.full-screen-dialog.header.headline.line-height
28pt
Full screen dialog header headline sizemd.comp.full-screen-dialog.header.headline.size
22pt
Full screen dialog header headline weightmd.comp.full-screen-dialog.header.headline.weight
400
Full screen dialog header headline trackingmd.comp.full-screen-dialog.header.headline.tracking
0pt
Header type stylemd.comp.full-screen-dialog.header.headline.type
Roboto · 22pt · weight 400 · line height 28pt · tracking 0pt
Divider
Divider tokens
TokenValue
Full screen dialog divider colormd.comp.full-screen-dialog.with-divider.divider.color
#E7E0EC
Full screen dialog divider heightmd.comp.full-screen-dialog.with-divider.divider.height
1dp
Hovered
Label text
Label text tokens
TokenValue
Full screen dialog header action hover label text colormd.comp.full-screen-dialog.header.action.hover.label-text.color
#6750A4
Full screen dialog action bar hover label text colormd.comp.full-screen-dialog.action-bar.hover.label-text.color
#6750A4
State layer
State layer tokens
TokenValue
Full screen dialog header action hover state layer colormd.comp.full-screen-dialog.header.action.hover.state-layer.color
#6750A4
Full screen dialog header action hover state layer opacitymd.comp.full-screen-dialog.header.action.hover.state-layer.opacity
8%
Full screen dialog action bar hover state layer colormd.comp.full-screen-dialog.action-bar.hover.state-layer.color
#6750A4
Full screen dialog action bar hover state layer opacitymd.comp.full-screen-dialog.action-bar.hover.state-layer.opacity
8%
Focused
Label text
Label text tokens
TokenValue
Full screen dialog header action focus label text colormd.comp.full-screen-dialog.header.action.focus.label-text.color
#6750A4
Full screen dialog action bar focus label text colormd.comp.full-screen-dialog.action-bar.focus.label-text.color
#6750A4
State layer
State layer tokens
TokenValue
Full screen dialog header action focus state layer colormd.comp.full-screen-dialog.header.action.focus.state-layer.color
#6750A4
Full screen dialog header action focus state layer opacitymd.comp.full-screen-dialog.header.action.focus.state-layer.opacity
10%
Full screen dialog action bar focus state layer colormd.comp.full-screen-dialog.action-bar.focus.state-layer.color
#6750A4
Full screen dialog action bar focus state layer opacitymd.comp.full-screen-dialog.action-bar.focus.state-layer.opacity
10%
Pressed (ripple)
Label text
Label text tokens
TokenValue
Full screen dialog header action pressed label text colormd.comp.full-screen-dialog.header.action.pressed.label-text.color
#6750A4
Full screen dialog action bar pressed label text colormd.comp.full-screen-dialog.action-bar.pressed.label-text.color
#6750A4
State layer
State layer tokens
TokenValue
Full screen dialog header action pressed state layer colormd.comp.full-screen-dialog.header.action.pressed.state-layer.color
#6750A4
Full screen dialog header action pressed state layer opacitymd.comp.full-screen-dialog.header.action.pressed.state-layer.opacity
10%
Full screen dialog action bar pressed state layer colormd.comp.full-screen-dialog.action-bar.pressed.state-layer.color
#6750A4
Full screen dialog action bar pressed state layer opacitymd.comp.full-screen-dialog.action-bar.pressed.state-layer.opacity
10%