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
Dialog container colormd.comp.dialog.container.color
#ECE6F0
Dialog container elevationmd.comp.dialog.container.elevation
6dp
Dialog container surface tint layer colormd.comp.dialog.container.surface-tint-layer.color
#6750A4
Dialog container shapemd.comp.dialog.container.shape
28dp
Label text
Label text tokens
TokenValue
Dialog action label text fontmd.comp.dialog.action.label-text.font
Roboto
Dialog action label text line heightmd.comp.dialog.action.label-text.line-height
20pt
Dialog action label text sizemd.comp.dialog.action.label-text.size
14pt
Dialog action label text weightmd.comp.dialog.action.label-text.weight
500
Dialog action label text trackingmd.comp.dialog.action.label-text.tracking
0.1pt
Label text type stylemd.comp.dialog.action.label-text.type
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
Dialog action label text colormd.comp.dialog.action.label-text.color
#6750A4
Icon
Icon tokens
TokenValue
Dialog icon sizemd.comp.dialog.with-icon.icon.size
24dp
Dialog icon colormd.comp.dialog.with-icon.icon.color
#625B71
Subhead
Subhead tokens
TokenValue
Dialog subhead fontmd.comp.dialog.subhead.font
Roboto
Dialog subhead line heightmd.comp.dialog.subhead.line-height
32pt
Dialog subhead sizemd.comp.dialog.subhead.size
24pt
Dialog subhead weightmd.comp.dialog.subhead.weight
400
Dialog subhead trackingmd.comp.dialog.subhead.tracking
0pt
Subhead type stylemd.comp.dialog.subhead.type
Roboto · 24pt · weight 400 · line height 32pt · tracking 0pt
Dialog subhead colormd.comp.dialog.subhead.color
#1D1B20
Headline
Headline tokens
TokenValue
Dialog headline fontmd.comp.dialog.headline.font
Roboto
Dialog headline line heightmd.comp.dialog.headline.line-height
32pt
Dialog headline sizemd.comp.dialog.headline.size
24pt
Dialog headline weightmd.comp.dialog.headline.weight
400
Dialog headline trackingmd.comp.dialog.headline.tracking
0pt
headline type stylemd.comp.dialog.headline.type
Roboto · 24pt · weight 400 · line height 32pt · tracking 0pt
Dialog headline colormd.comp.dialog.headline.color
#1D1B20
Divider
Divider tokens
TokenValue
Dialog divider colormd.comp.dialog.with-divider.divider.color
#79747E
Dialog divider colormd.comp.dialog.with-divider.divider.height
1dp
Supporting text
Supporting text tokens
TokenValue
Dialog supporting text fontmd.comp.dialog.supporting-text.font
Roboto
Dialog supporting text line heightmd.comp.dialog.supporting-text.line-height
20pt
Dialog supporting text sizemd.comp.dialog.supporting-text.size
14pt
Dialog supporting text weightmd.comp.dialog.supporting-text.weight
400
Dialog supporting text trackingmd.comp.dialog.supporting-text.tracking
0.25pt
Supporting text type stylemd.comp.dialog.supporting-text.type
Roboto · 14pt · weight 400 · line height 20pt · tracking 0.25pt
Dialog supporting text colormd.comp.dialog.supporting-text.color
#49454F
Hovered
Label text
Label text tokens
TokenValue
Dialog action hover label text colormd.comp.dialog.action.hover.label-text.color
#6750A4
State layer
State layer tokens
TokenValue
Dialog action hover state layer colormd.comp.dialog.action.hover.state-layer.color
#6750A4
Dialog action hover state layer opacitymd.comp.dialog.action.hover.state-layer.opacity
8%
Focused
Label text
Label text tokens
TokenValue
Dialog action focus label text colormd.comp.dialog.action.focus.label-text.color
#6750A4
State layer
State layer tokens
TokenValue
Dialog action focus state layer colormd.comp.dialog.action.focus.state-layer.color
#6750A4
Dialog action focus state layer opacitymd.comp.dialog.action.focus.state-layer.opacity
10%
Pressed (ripple)
Label text
Label text tokens
TokenValue
Dialog action pressed label text colormd.comp.dialog.action.pressed.label-text.color
#6750A4
State layer
State layer tokens
TokenValue
Dialog action pressed state layer colormd.comp.dialog.action.pressed.state-layer.color
#6750A4
Dialog action pressed state layer opacitymd.comp.dialog.action.pressed.state-layer.opacity
10%