Component

Material Design 3 modal date input tokens

Browse tokens

Token

See more values

Compare token values by selecting another context

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
Enabled tokens
TokenValue
Container shapemd.comp.date-input.modal.container.shape
md.sys.shape.corner.extra-largeShow reference chainHide reference chain
md.comp.date-input.modal.container.shape
  • md.sys.shape.corner.extra-large
Rounded Corners · DefaultSize: 28dp
Container
Container tokens
TokenValue
Container heightmd.comp.date-input.modal.container.height512dp
Container widthmd.comp.date-input.modal.container.width328dp
Header
Container
Container tokens
TokenValue
Header container heightmd.comp.date-input.modal.header.container.height120dp
Header container widthmd.comp.date-input.modal.header.container.width328dp
Headline
Headline tokens
TokenValue
Header headline fontmd.comp.date-input.modal.header.headline.font
md.sys.typescale.headline-large.fontShow reference chainHide reference chain
md.comp.date-input.modal.header.headline.font
  • md.sys.typescale.headline-large.font
    • md.ref.typeface.brand
Roboto
Header headline line heightmd.comp.date-input.modal.header.headline.line-height
md.sys.typescale.headline-large.line-heightShow reference chainHide reference chain
md.comp.date-input.modal.header.headline.line-height
  • md.sys.typescale.headline-large.line-height
40pt
Header headline sizemd.comp.date-input.modal.header.headline.size
md.sys.typescale.headline-large.sizeShow reference chainHide reference chain
md.comp.date-input.modal.header.headline.size
  • md.sys.typescale.headline-large.size
32pt
Header headline trackingmd.comp.date-input.modal.header.headline.tracking
md.sys.typescale.headline-large.trackingShow reference chainHide reference chain
md.comp.date-input.modal.header.headline.tracking
  • md.sys.typescale.headline-large.tracking
No value specified (pt)
Header headline type stylemd.comp.date-input.modal.header.headline.type
md.comp.date-input.modal.header.headline.fontmd.comp.date-input.modal.header.headline.weightmd.comp.date-input.modal.header.headline.sizemd.comp.date-input.modal.header.headline.line-heightmd.comp.date-input.modal.header.headline.trackingShow reference chainHide reference chain
md.comp.date-input.modal.header.headline.type
  • md.comp.date-input.modal.header.headline.font
    • md.sys.typescale.headline-large.font
      • md.ref.typeface.brand
  • md.comp.date-input.modal.header.headline.weight
    • md.sys.typescale.headline-large.weight
      • md.ref.typeface.weight-regular
  • md.comp.date-input.modal.header.headline.size
    • md.sys.typescale.headline-large.size
  • md.comp.date-input.modal.header.headline.line-height
    • md.sys.typescale.headline-large.line-height
  • md.comp.date-input.modal.header.headline.tracking
    • md.sys.typescale.headline-large.tracking
Roboto · 32pt · weight 400 · line height 40pt · tracking No value specified (pt)
Header headline weightmd.comp.date-input.modal.header.headline.weight
md.sys.typescale.headline-large.weightShow reference chainHide reference chain
md.comp.date-input.modal.header.headline.weight
  • md.sys.typescale.headline-large.weight
    • md.ref.typeface.weight-regular
400
Supporting Text
Supporting Text tokens
TokenValue
Header supporting text fontmd.comp.date-input.modal.header.supporting-text.font
md.sys.typescale.label-large.fontShow reference chainHide reference chain
md.comp.date-input.modal.header.supporting-text.font
  • md.sys.typescale.label-large.font
    • md.ref.typeface.plain
Roboto
Header supporting text line heightmd.comp.date-input.modal.header.supporting-text.line-height
md.sys.typescale.label-large.line-heightShow reference chainHide reference chain
md.comp.date-input.modal.header.supporting-text.line-height
  • md.sys.typescale.label-large.line-height
20pt
Header supporting text sizemd.comp.date-input.modal.header.supporting-text.size
md.sys.typescale.label-large.sizeShow reference chainHide reference chain
md.comp.date-input.modal.header.supporting-text.size
  • md.sys.typescale.label-large.size
14pt
Header supporting text trackingmd.comp.date-input.modal.header.supporting-text.tracking
md.sys.typescale.label-large.trackingShow reference chainHide reference chain
md.comp.date-input.modal.header.supporting-text.tracking
  • md.sys.typescale.label-large.tracking
0.1pt
Header supporting text type stylemd.comp.date-input.modal.header.supporting-text.type
md.comp.date-input.modal.header.supporting-text.fontmd.comp.date-input.modal.header.supporting-text.weightmd.comp.date-input.modal.header.supporting-text.sizemd.comp.date-input.modal.header.supporting-text.line-heightmd.comp.date-input.modal.header.supporting-text.trackingShow reference chainHide reference chain
md.comp.date-input.modal.header.supporting-text.type
  • md.comp.date-input.modal.header.supporting-text.font
    • md.sys.typescale.label-large.font
      • md.ref.typeface.plain
  • md.comp.date-input.modal.header.supporting-text.weight
    • md.sys.typescale.label-large.weight
      • md.ref.typeface.weight-medium
  • md.comp.date-input.modal.header.supporting-text.size
    • md.sys.typescale.label-large.size
  • md.comp.date-input.modal.header.supporting-text.line-height
    • md.sys.typescale.label-large.line-height
  • md.comp.date-input.modal.header.supporting-text.tracking
    • md.sys.typescale.label-large.tracking
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
Header supporting text weightmd.comp.date-input.modal.header.supporting-text.weight
md.sys.typescale.label-large.weightShow reference chainHide reference chain
md.comp.date-input.modal.header.supporting-text.weight
  • md.sys.typescale.label-large.weight
    • md.ref.typeface.weight-medium
500