Material Design 3 "Dialog" tokens: All tokens
Preview
Browse tokens
Color
Dialog - Full screen
Enabled
Container
| Token | Value |
|---|---|
Full screen dialog action bar container colormd.comp.full-screen-dialog.action-bar.container.color | #FEF7FF md.comp.full-screen-dialog.action-bar.container.color
|
Full screen dialog action bar container elevationmd.comp.full-screen-dialog.action-bar.container.elevation | 0dp md.comp.full-screen-dialog.action-bar.container.elevation
|
Full screen dialog action bar container heightmd.comp.full-screen-dialog.action-bar.container.height | 56dp md.comp.full-screen-dialog.action-bar.container.height |
Full screen dialog action bar on scroll container elevationmd.comp.full-screen-dialog.action-bar.on-scroll.container.elevation | 3dp md.comp.full-screen-dialog.action-bar.on-scroll.container.elevation
|
Full screen dialog container colormd.comp.full-screen-dialog.container.color | #FEF7FF md.comp.full-screen-dialog.container.color
|
Full screen dialog container elevationmd.comp.full-screen-dialog.container.elevation | 0dp md.comp.full-screen-dialog.container.elevation
|
Full screen dialog container shapemd.comp.full-screen-dialog.container.shape | 0dp md.comp.full-screen-dialog.container.shape
|
Full screen dialog header container colormd.comp.full-screen-dialog.header.container.color | #FEF7FF md.comp.full-screen-dialog.header.container.color
|
Full screen dialog header container elevationmd.comp.full-screen-dialog.header.container.elevation | 0dp md.comp.full-screen-dialog.header.container.elevation
|
Full screen dialog header container heightmd.comp.full-screen-dialog.header.container.height | 56dp md.comp.full-screen-dialog.header.container.height |
Full screen dialog header container surface tint layer colormd.comp.full-screen-dialog.header.container.surface-tint-layer.color | #6750A4 md.comp.full-screen-dialog.header.container.surface-tint-layer.color
|
Full screen dialog on-scroll container colormd.comp.full-screen-dialog.header.on-scroll.container.color | #F3EDF7 md.comp.full-screen-dialog.header.on-scroll.container.color
|
Full screen dialog header on scroll container elevationmd.comp.full-screen-dialog.header.on-scroll.container.elevation | 3dp md.comp.full-screen-dialog.header.on-scroll.container.elevation
|
Label text
| Token | Value |
|---|---|
Full screen dialog action bar label text colormd.comp.full-screen-dialog.action-bar.label-text.color | #6750A4 md.comp.full-screen-dialog.action-bar.label-text.color
|
Full screen dialog action bar label text fontmd.comp.full-screen-dialog.action-bar.label-text.font | Roboto md.comp.full-screen-dialog.action-bar.label-text.font
|
Full screen dialog action bar label text line heightmd.comp.full-screen-dialog.action-bar.label-text.line-height | 20pt md.comp.full-screen-dialog.action-bar.label-text.line-height
|
Full screen dialog action bar label text sizemd.comp.full-screen-dialog.action-bar.label-text.size | 14pt md.comp.full-screen-dialog.action-bar.label-text.size
|
Full screen dialog action bar label text trackingmd.comp.full-screen-dialog.action-bar.label-text.tracking | 0.1pt md.comp.full-screen-dialog.action-bar.label-text.tracking
|
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 md.comp.full-screen-dialog.action-bar.label-text.type
|
Full screen dialog action bar label text weightmd.comp.full-screen-dialog.action-bar.label-text.weight | 500 md.comp.full-screen-dialog.action-bar.label-text.weight
|
Full screen dialog header action label text colormd.comp.full-screen-dialog.header.action.label-text.color | #6750A4 md.comp.full-screen-dialog.header.action.label-text.color
|
Full screen dialog header action label text fontmd.comp.full-screen-dialog.header.action.label-text.font | Roboto md.comp.full-screen-dialog.header.action.label-text.font
|
Full screen dialog header action label text line heightmd.comp.full-screen-dialog.header.action.label-text.line-height | 20pt md.comp.full-screen-dialog.header.action.label-text.line-height
|
Full screen dialog header action label text sizemd.comp.full-screen-dialog.header.action.label-text.size | 14pt md.comp.full-screen-dialog.header.action.label-text.size
|
Full screen dialog header action label text trackingmd.comp.full-screen-dialog.header.action.label-text.tracking | 0.1pt md.comp.full-screen-dialog.header.action.label-text.tracking
|
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 md.comp.full-screen-dialog.header.action.label-text.type
|
Full screen dialog header action label text weightmd.comp.full-screen-dialog.header.action.label-text.weight | 500 md.comp.full-screen-dialog.header.action.label-text.weight
|
Icon
| Token | Value |
|---|---|
Full screen dialog header icon colormd.comp.full-screen-dialog.header.icon.color | #1D1B20 md.comp.full-screen-dialog.header.icon.color
|
Full screen dialog header icon sizemd.comp.full-screen-dialog.header.icon.size | 24dp md.comp.full-screen-dialog.header.icon.size |
Headline
| Token | Value |
|---|---|
Full screen dialog header headline colormd.comp.full-screen-dialog.header.headline.color | #1D1B20 md.comp.full-screen-dialog.header.headline.color
|
Full screen dialog header headline fontmd.comp.full-screen-dialog.header.headline.font | Roboto md.comp.full-screen-dialog.header.headline.font
|
Full screen dialog header headline line heightmd.comp.full-screen-dialog.header.headline.line-height | 28pt md.comp.full-screen-dialog.header.headline.line-height
|
Full screen dialog header headline sizemd.comp.full-screen-dialog.header.headline.size | 22pt md.comp.full-screen-dialog.header.headline.size
|
Full screen dialog header headline trackingmd.comp.full-screen-dialog.header.headline.tracking | 0pt md.comp.full-screen-dialog.header.headline.tracking
|
Header type stylemd.comp.full-screen-dialog.header.headline.type | Roboto · 22pt · weight 400 · line height 28pt · tracking 0pt md.comp.full-screen-dialog.header.headline.type
|
Full screen dialog header headline weightmd.comp.full-screen-dialog.header.headline.weight | 400 md.comp.full-screen-dialog.header.headline.weight
|
Divider
| Token | Value |
|---|---|
Full screen dialog divider colormd.comp.full-screen-dialog.with-divider.divider.color | #E7E0EC md.comp.full-screen-dialog.with-divider.divider.color
|
Full screen dialog divider heightmd.comp.full-screen-dialog.with-divider.divider.height | 1dp md.comp.full-screen-dialog.with-divider.divider.height |
Hovered
Label text
| Token | Value |
|---|---|
Full screen dialog action bar hover label text colormd.comp.full-screen-dialog.action-bar.hover.label-text.color | #6750A4 md.comp.full-screen-dialog.action-bar.hover.label-text.color
|
Full screen dialog header action hover label text colormd.comp.full-screen-dialog.header.action.hover.label-text.color | #6750A4 md.comp.full-screen-dialog.header.action.hover.label-text.color
|
State layer
| Token | Value |
|---|---|
Full screen dialog action bar hover state layer colormd.comp.full-screen-dialog.action-bar.hover.state-layer.color | #6750A4 md.comp.full-screen-dialog.action-bar.hover.state-layer.color
|
Full screen dialog action bar hover state layer opacitymd.comp.full-screen-dialog.action-bar.hover.state-layer.opacity | 8% md.comp.full-screen-dialog.action-bar.hover.state-layer.opacity
|
Full screen dialog header action hover state layer colormd.comp.full-screen-dialog.header.action.hover.state-layer.color | #6750A4 md.comp.full-screen-dialog.header.action.hover.state-layer.color
|
Full screen dialog header action hover state layer opacitymd.comp.full-screen-dialog.header.action.hover.state-layer.opacity | 8% md.comp.full-screen-dialog.header.action.hover.state-layer.opacity
|
Focused
Label text
| Token | Value |
|---|---|
Full screen dialog action bar focus label text colormd.comp.full-screen-dialog.action-bar.focus.label-text.color | #6750A4 md.comp.full-screen-dialog.action-bar.focus.label-text.color
|
Full screen dialog header action focus label text colormd.comp.full-screen-dialog.header.action.focus.label-text.color | #6750A4 md.comp.full-screen-dialog.header.action.focus.label-text.color
|
State layer
| Token | Value |
|---|---|
Full screen dialog action bar focus state layer colormd.comp.full-screen-dialog.action-bar.focus.state-layer.color | #6750A4 md.comp.full-screen-dialog.action-bar.focus.state-layer.color
|
Full screen dialog action bar focus state layer opacitymd.comp.full-screen-dialog.action-bar.focus.state-layer.opacity | 10% md.comp.full-screen-dialog.action-bar.focus.state-layer.opacity
|
Full screen dialog header action focus state layer colormd.comp.full-screen-dialog.header.action.focus.state-layer.color | #6750A4 md.comp.full-screen-dialog.header.action.focus.state-layer.color
|
Full screen dialog header action focus state layer opacitymd.comp.full-screen-dialog.header.action.focus.state-layer.opacity | 10% md.comp.full-screen-dialog.header.action.focus.state-layer.opacity
|
Pressed (ripple)
Label text
| Token | Value |
|---|---|
Full screen dialog action bar pressed label text colormd.comp.full-screen-dialog.action-bar.pressed.label-text.color | #6750A4 md.comp.full-screen-dialog.action-bar.pressed.label-text.color
|
Full screen dialog header action pressed label text colormd.comp.full-screen-dialog.header.action.pressed.label-text.color | #6750A4 md.comp.full-screen-dialog.header.action.pressed.label-text.color
|
State layer
| Token | Value |
|---|---|
Full screen dialog action bar pressed state layer colormd.comp.full-screen-dialog.action-bar.pressed.state-layer.color | #6750A4 md.comp.full-screen-dialog.action-bar.pressed.state-layer.color
|
Full screen dialog action bar pressed state layer opacitymd.comp.full-screen-dialog.action-bar.pressed.state-layer.opacity | 10% md.comp.full-screen-dialog.action-bar.pressed.state-layer.opacity
|
Full screen dialog header action pressed state layer colormd.comp.full-screen-dialog.header.action.pressed.state-layer.color | #6750A4 md.comp.full-screen-dialog.header.action.pressed.state-layer.color
|
Full screen dialog header action pressed state layer opacitymd.comp.full-screen-dialog.header.action.pressed.state-layer.opacity | 10% md.comp.full-screen-dialog.header.action.pressed.state-layer.opacity
|
Dialog - Basic
Enabled
Container
| Token | Value |
|---|---|
Dialog container colormd.comp.dialog.container.color | #ECE6F0 md.comp.dialog.container.color
|
Dialog container elevationmd.comp.dialog.container.elevation | 6dp md.comp.dialog.container.elevation
|
Dialog container shapemd.comp.dialog.container.shape | 28dp md.comp.dialog.container.shape
|
Dialog container surface tint layer colormd.comp.dialog.container.surface-tint-layer.color | #6750A4 md.comp.dialog.container.surface-tint-layer.color
|
Label text
| Token | Value |
|---|---|
Dialog action label text colormd.comp.dialog.action.label-text.color | #6750A4 md.comp.dialog.action.label-text.color
|
Dialog action label text fontmd.comp.dialog.action.label-text.font | Roboto md.comp.dialog.action.label-text.font
|
Dialog action label text line heightmd.comp.dialog.action.label-text.line-height | 20pt md.comp.dialog.action.label-text.line-height
|
Dialog action label text sizemd.comp.dialog.action.label-text.size | 14pt md.comp.dialog.action.label-text.size
|
Dialog action label text trackingmd.comp.dialog.action.label-text.tracking | 0.1pt md.comp.dialog.action.label-text.tracking
|
Label text type stylemd.comp.dialog.action.label-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.dialog.action.label-text.type
|
Dialog action label text weightmd.comp.dialog.action.label-text.weight | 500 md.comp.dialog.action.label-text.weight
|
Icon
| Token | Value |
|---|---|
Dialog icon colormd.comp.dialog.with-icon.icon.color | #625B71 md.comp.dialog.with-icon.icon.color
|
Dialog icon sizemd.comp.dialog.with-icon.icon.size | 24dp md.comp.dialog.with-icon.icon.size |
Subhead
| Token | Value |
|---|---|
Dialog subhead colormd.comp.dialog.subhead.color | #1D1B20 md.comp.dialog.subhead.color
|
Dialog subhead fontmd.comp.dialog.subhead.font | Roboto md.comp.dialog.subhead.font
|
Dialog subhead line heightmd.comp.dialog.subhead.line-height | 32pt md.comp.dialog.subhead.line-height
|
Dialog subhead sizemd.comp.dialog.subhead.size | 24pt md.comp.dialog.subhead.size
|
Dialog subhead trackingmd.comp.dialog.subhead.tracking | 0pt md.comp.dialog.subhead.tracking
|
Subhead type stylemd.comp.dialog.subhead.type | Roboto · 24pt · weight 400 · line height 32pt · tracking 0pt md.comp.dialog.subhead.type
|
Dialog subhead weightmd.comp.dialog.subhead.weight | 400 md.comp.dialog.subhead.weight
|
Headline
| Token | Value |
|---|---|
Dialog headline colormd.comp.dialog.headline.color | #1D1B20 md.comp.dialog.headline.color
|
Dialog headline fontmd.comp.dialog.headline.font | Roboto md.comp.dialog.headline.font
|
Dialog headline line heightmd.comp.dialog.headline.line-height | 32pt md.comp.dialog.headline.line-height
|
Dialog headline sizemd.comp.dialog.headline.size | 24pt md.comp.dialog.headline.size
|
Dialog headline trackingmd.comp.dialog.headline.tracking | 0pt md.comp.dialog.headline.tracking
|
headline type stylemd.comp.dialog.headline.type | Roboto · 24pt · weight 400 · line height 32pt · tracking 0pt md.comp.dialog.headline.type
|
Dialog headline weightmd.comp.dialog.headline.weight | 400 md.comp.dialog.headline.weight
|
Divider
| Token | Value |
|---|---|
Dialog divider colormd.comp.dialog.with-divider.divider.color | #79747E md.comp.dialog.with-divider.divider.color
|
Dialog divider colormd.comp.dialog.with-divider.divider.height | 1dp md.comp.dialog.with-divider.divider.height |
Supporting text
| Token | Value |
|---|---|
Dialog supporting text colormd.comp.dialog.supporting-text.color | #49454F md.comp.dialog.supporting-text.color
|
Dialog supporting text fontmd.comp.dialog.supporting-text.font | Roboto md.comp.dialog.supporting-text.font
|
Dialog supporting text line heightmd.comp.dialog.supporting-text.line-height | 20pt md.comp.dialog.supporting-text.line-height
|
Dialog supporting text sizemd.comp.dialog.supporting-text.size | 14pt md.comp.dialog.supporting-text.size
|
Dialog supporting text trackingmd.comp.dialog.supporting-text.tracking | 0.25pt md.comp.dialog.supporting-text.tracking
|
Supporting text type stylemd.comp.dialog.supporting-text.type | Roboto · 14pt · weight 400 · line height 20pt · tracking 0.25pt md.comp.dialog.supporting-text.type
|
Dialog supporting text weightmd.comp.dialog.supporting-text.weight | 400 md.comp.dialog.supporting-text.weight
|
Hovered
Label text
| Token | Value |
|---|---|
Dialog action hover label text colormd.comp.dialog.action.hover.label-text.color | #6750A4 md.comp.dialog.action.hover.label-text.color
|
State layer
| Token | Value |
|---|---|
Dialog action hover state layer colormd.comp.dialog.action.hover.state-layer.color | #6750A4 md.comp.dialog.action.hover.state-layer.color
|
Dialog action hover state layer opacitymd.comp.dialog.action.hover.state-layer.opacity | 8% md.comp.dialog.action.hover.state-layer.opacity
|
Focused
Label text
| Token | Value |
|---|---|
Dialog action focus label text colormd.comp.dialog.action.focus.label-text.color | #6750A4 md.comp.dialog.action.focus.label-text.color
|
State layer
| Token | Value |
|---|---|
Dialog action focus state layer colormd.comp.dialog.action.focus.state-layer.color | #6750A4 md.comp.dialog.action.focus.state-layer.color
|
Dialog action focus state layer opacitymd.comp.dialog.action.focus.state-layer.opacity | 10% md.comp.dialog.action.focus.state-layer.opacity
|
Pressed (ripple)
Label text
| Token | Value |
|---|---|
Dialog action pressed label text colormd.comp.dialog.action.pressed.label-text.color | #6750A4 md.comp.dialog.action.pressed.label-text.color
|
State layer
| Token | Value |
|---|---|
Dialog action pressed state layer colormd.comp.dialog.action.pressed.state-layer.color | #6750A4 md.comp.dialog.action.pressed.state-layer.color
|
Dialog action pressed state layer opacitymd.comp.dialog.action.pressed.state-layer.opacity | 10% md.comp.dialog.action.pressed.state-layer.opacity
|