Component

Material Design 3 modal date picker 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-picker.modal.container.shape
md.sys.shape.corner.extra-largeShow reference chainHide reference chain
md.comp.date-picker.modal.container.shape
  • md.sys.shape.corner.extra-large
Rounded Corners · DefaultSize: 28dp
Container
Container tokens
TokenValue
Container heightmd.comp.date-picker.modal.container.height524dp
Container widthmd.comp.date-picker.modal.container.width360dp
Date
Date tokens
TokenValue
Date container shapemd.comp.date-picker.modal.date.container.shape
md.sys.shape.corner.fullShow reference chainHide reference chain
md.comp.date-picker.modal.date.container.shape
  • md.sys.shape.corner.full
Circular
Date state layer shapemd.comp.date-picker.modal.date.state-layer.shape
md.sys.shape.corner.fullShow reference chainHide reference chain
md.comp.date-picker.modal.date.state-layer.shape
  • md.sys.shape.corner.full
Circular
Container
Container tokens
TokenValue
Date container heightmd.comp.date-picker.modal.date.container.height40dp
Date container widthmd.comp.date-picker.modal.date.container.width40dp
Label Text
Label Text tokens
TokenValue
Date label text fontmd.comp.date-picker.modal.date.label-text.font
md.sys.typescale.body-large.fontShow reference chainHide reference chain
md.comp.date-picker.modal.date.label-text.font
  • md.sys.typescale.body-large.font
    • md.ref.typeface.plain
Roboto
Date label text line heightmd.comp.date-picker.modal.date.label-text.line-height
md.sys.typescale.body-large.line-heightShow reference chainHide reference chain
md.comp.date-picker.modal.date.label-text.line-height
  • md.sys.typescale.body-large.line-height
24pt
Date label text sizemd.comp.date-picker.modal.date.label-text.size
md.sys.typescale.body-large.sizeShow reference chainHide reference chain
md.comp.date-picker.modal.date.label-text.size
  • md.sys.typescale.body-large.size
16pt
Date label text trackingmd.comp.date-picker.modal.date.label-text.tracking
md.sys.typescale.body-large.trackingShow reference chainHide reference chain
md.comp.date-picker.modal.date.label-text.tracking
  • md.sys.typescale.body-large.tracking
0.5pt
Date label text type stylemd.comp.date-picker.modal.date.label-text.type
md.comp.date-picker.modal.date.label-text.fontmd.comp.date-picker.modal.date.label-text.weightmd.comp.date-picker.modal.date.label-text.sizemd.comp.date-picker.modal.date.label-text.line-heightmd.comp.date-picker.modal.date.label-text.trackingShow reference chainHide reference chain
md.comp.date-picker.modal.date.label-text.type
  • md.comp.date-picker.modal.date.label-text.font
    • md.sys.typescale.body-large.font
      • md.ref.typeface.plain
  • md.comp.date-picker.modal.date.label-text.weight
    • md.sys.typescale.body-large.weight
      • md.ref.typeface.weight-regular
  • md.comp.date-picker.modal.date.label-text.size
    • md.sys.typescale.body-large.size
  • md.comp.date-picker.modal.date.label-text.line-height
    • md.sys.typescale.body-large.line-height
  • md.comp.date-picker.modal.date.label-text.tracking
    • md.sys.typescale.body-large.tracking
Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt
Date label text weightmd.comp.date-picker.modal.date.label-text.weight
md.sys.typescale.body-large.weightShow reference chainHide reference chain
md.comp.date-picker.modal.date.label-text.weight
  • md.sys.typescale.body-large.weight
    • md.ref.typeface.weight-regular
400
State Layer
State Layer tokens
TokenValue
Date state layer heightmd.comp.date-picker.modal.date.state-layer.height40dp
Date state layer widthmd.comp.date-picker.modal.date.state-layer.width40dp
Today
Container
Outline
Outline tokens
TokenValue
Date today container outline widthmd.comp.date-picker.modal.date.today.container.outline.width1dp
Header
Container
Container tokens
TokenValue
Header container heightmd.comp.date-picker.modal.header.container.height120dp
Header container widthmd.comp.date-picker.modal.header.container.width360dp
Headline
Headline tokens
TokenValue
Header headline fontmd.comp.date-picker.modal.header.headline.font
md.sys.typescale.headline-large.fontShow reference chainHide reference chain
md.comp.date-picker.modal.header.headline.font
  • md.sys.typescale.headline-large.font
    • md.ref.typeface.brand
Roboto
Header headline line heightmd.comp.date-picker.modal.header.headline.line-height
md.sys.typescale.headline-large.line-heightShow reference chainHide reference chain
md.comp.date-picker.modal.header.headline.line-height
  • md.sys.typescale.headline-large.line-height
40pt
Header headline sizemd.comp.date-picker.modal.header.headline.size
md.sys.typescale.headline-large.sizeShow reference chainHide reference chain
md.comp.date-picker.modal.header.headline.size
  • md.sys.typescale.headline-large.size
32pt
Header headline trackingmd.comp.date-picker.modal.header.headline.tracking
md.sys.typescale.headline-large.trackingShow reference chainHide reference chain
md.comp.date-picker.modal.header.headline.tracking
  • md.sys.typescale.headline-large.tracking
No value specified (pt)
Header headline type stylemd.comp.date-picker.modal.header.headline.type
md.comp.date-picker.modal.header.headline.fontmd.comp.date-picker.modal.header.headline.weightmd.comp.date-picker.modal.header.headline.sizemd.comp.date-picker.modal.header.headline.line-heightmd.comp.date-picker.modal.header.headline.trackingShow reference chainHide reference chain
md.comp.date-picker.modal.header.headline.type
  • md.comp.date-picker.modal.header.headline.font
    • md.sys.typescale.headline-large.font
      • md.ref.typeface.brand
  • md.comp.date-picker.modal.header.headline.weight
    • md.sys.typescale.headline-large.weight
      • md.ref.typeface.weight-regular
  • md.comp.date-picker.modal.header.headline.size
    • md.sys.typescale.headline-large.size
  • md.comp.date-picker.modal.header.headline.line-height
    • md.sys.typescale.headline-large.line-height
  • md.comp.date-picker.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-picker.modal.header.headline.weight
md.sys.typescale.headline-large.weightShow reference chainHide reference chain
md.comp.date-picker.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-picker.modal.header.supporting-text.font
md.sys.typescale.label-large.fontShow reference chainHide reference chain
md.comp.date-picker.modal.header.supporting-text.font
  • md.sys.typescale.label-large.font
    • md.ref.typeface.plain
Roboto
Header supporting text line heightmd.comp.date-picker.modal.header.supporting-text.line-height
md.sys.typescale.label-large.line-heightShow reference chainHide reference chain
md.comp.date-picker.modal.header.supporting-text.line-height
  • md.sys.typescale.label-large.line-height
20pt
Header supporting text sizemd.comp.date-picker.modal.header.supporting-text.size
md.sys.typescale.label-large.sizeShow reference chainHide reference chain
md.comp.date-picker.modal.header.supporting-text.size
  • md.sys.typescale.label-large.size
14pt
Header supporting text trackingmd.comp.date-picker.modal.header.supporting-text.tracking
md.sys.typescale.label-large.trackingShow reference chainHide reference chain
md.comp.date-picker.modal.header.supporting-text.tracking
  • md.sys.typescale.label-large.tracking
0.1pt
Header supporting text type stylemd.comp.date-picker.modal.header.supporting-text.type
md.comp.date-picker.modal.header.supporting-text.fontmd.comp.date-picker.modal.header.supporting-text.weightmd.comp.date-picker.modal.header.supporting-text.sizemd.comp.date-picker.modal.header.supporting-text.line-heightmd.comp.date-picker.modal.header.supporting-text.trackingShow reference chainHide reference chain
md.comp.date-picker.modal.header.supporting-text.type
  • md.comp.date-picker.modal.header.supporting-text.font
    • md.sys.typescale.label-large.font
      • md.ref.typeface.plain
  • md.comp.date-picker.modal.header.supporting-text.weight
    • md.sys.typescale.label-large.weight
      • md.ref.typeface.weight-medium
  • md.comp.date-picker.modal.header.supporting-text.size
    • md.sys.typescale.label-large.size
  • md.comp.date-picker.modal.header.supporting-text.line-height
    • md.sys.typescale.label-large.line-height
  • md.comp.date-picker.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-picker.modal.header.supporting-text.weight
md.sys.typescale.label-large.weightShow reference chainHide reference chain
md.comp.date-picker.modal.header.supporting-text.weight
  • md.sys.typescale.label-large.weight
    • md.ref.typeface.weight-medium
500
Range Selection
Range Selection tokens
TokenValue
Range selection container shapemd.comp.date-picker.modal.range-selection.container.shape
md.sys.shape.corner.noneShow reference chainHide reference chain
md.comp.date-picker.modal.range-selection.container.shape
  • md.sys.shape.corner.none
Rounded Corners · DefaultSize: No value specified (dp)
Active Indicator
Active Indicator tokens
TokenValue
Range selection active indicator container shapemd.comp.date-picker.modal.range-selection.active-indicator.container.shape
md.sys.shape.corner.fullShow reference chainHide reference chain
md.comp.date-picker.modal.range-selection.active-indicator.container.shape
  • md.sys.shape.corner.full
Circular
Container
Container tokens
TokenValue
Range selection active indicator container heightmd.comp.date-picker.modal.range-selection.active-indicator.container.height40dp
Header
Container
Container tokens
TokenValue
Range selection header container heightmd.comp.date-picker.modal.range-selection.header.container.height128dp
Headline
Headline tokens
TokenValue
Range selection header headline fontmd.comp.date-picker.modal.range-selection.header.headline.font
md.sys.typescale.title-large.fontShow reference chainHide reference chain
md.comp.date-picker.modal.range-selection.header.headline.font
  • md.sys.typescale.title-large.font
    • md.ref.typeface.brand
Roboto
Range selection header headline line heightmd.comp.date-picker.modal.range-selection.header.headline.line-height
md.sys.typescale.title-large.line-heightShow reference chainHide reference chain
md.comp.date-picker.modal.range-selection.header.headline.line-height
  • md.sys.typescale.title-large.line-height
28pt
Range selection header headline sizemd.comp.date-picker.modal.range-selection.header.headline.size
md.sys.typescale.title-large.sizeShow reference chainHide reference chain
md.comp.date-picker.modal.range-selection.header.headline.size
  • md.sys.typescale.title-large.size
22pt
Range selection header headline trackingmd.comp.date-picker.modal.range-selection.header.headline.tracking
md.sys.typescale.title-large.trackingShow reference chainHide reference chain
md.comp.date-picker.modal.range-selection.header.headline.tracking
  • md.sys.typescale.title-large.tracking
No value specified (pt)
Range selection header headline type stylemd.comp.date-picker.modal.range-selection.header.headline.type
md.comp.date-picker.modal.range-selection.header.headline.fontmd.comp.date-picker.modal.range-selection.header.headline.weightmd.comp.date-picker.modal.range-selection.header.headline.sizemd.comp.date-picker.modal.range-selection.header.headline.line-heightmd.comp.date-picker.modal.range-selection.header.headline.trackingShow reference chainHide reference chain
md.comp.date-picker.modal.range-selection.header.headline.type
  • md.comp.date-picker.modal.range-selection.header.headline.font
    • md.sys.typescale.title-large.font
      • md.ref.typeface.brand
  • md.comp.date-picker.modal.range-selection.header.headline.weight
    • md.sys.typescale.title-large.weight
      • md.ref.typeface.weight-regular
  • md.comp.date-picker.modal.range-selection.header.headline.size
    • md.sys.typescale.title-large.size
  • md.comp.date-picker.modal.range-selection.header.headline.line-height
    • md.sys.typescale.title-large.line-height
  • md.comp.date-picker.modal.range-selection.header.headline.tracking
    • md.sys.typescale.title-large.tracking
Roboto · 22pt · weight 400 · line height 28pt · tracking No value specified (pt)
Range selection header headline weightmd.comp.date-picker.modal.range-selection.header.headline.weight
md.sys.typescale.title-large.weightShow reference chainHide reference chain
md.comp.date-picker.modal.range-selection.header.headline.weight
  • md.sys.typescale.title-large.weight
    • md.ref.typeface.weight-regular
400
Month
Subhead
Subhead tokens
TokenValue
Range selection month subhead fontmd.comp.date-picker.modal.range-selection.month.subhead.font
md.sys.typescale.title-small.fontShow reference chainHide reference chain
md.comp.date-picker.modal.range-selection.month.subhead.font
  • md.sys.typescale.title-small.font
    • md.ref.typeface.plain
Roboto
Range selection month subhead line heightmd.comp.date-picker.modal.range-selection.month.subhead.line-height
md.sys.typescale.title-small.line-heightShow reference chainHide reference chain
md.comp.date-picker.modal.range-selection.month.subhead.line-height
  • md.sys.typescale.title-small.line-height
20pt
Range selection month subhead sizemd.comp.date-picker.modal.range-selection.month.subhead.size
md.sys.typescale.title-small.sizeShow reference chainHide reference chain
md.comp.date-picker.modal.range-selection.month.subhead.size
  • md.sys.typescale.title-small.size
14pt
Range selection month subhead trackingmd.comp.date-picker.modal.range-selection.month.subhead.tracking
md.sys.typescale.title-small.trackingShow reference chainHide reference chain
md.comp.date-picker.modal.range-selection.month.subhead.tracking
  • md.sys.typescale.title-small.tracking
0.1pt
Range selection month subhead type stylemd.comp.date-picker.modal.range-selection.month.subhead.type
md.comp.date-picker.modal.range-selection.month.subhead.fontmd.comp.date-picker.modal.range-selection.month.subhead.weightmd.comp.date-picker.modal.range-selection.month.subhead.sizemd.comp.date-picker.modal.range-selection.month.subhead.line-heightmd.comp.date-picker.modal.range-selection.month.subhead.trackingShow reference chainHide reference chain
md.comp.date-picker.modal.range-selection.month.subhead.type
  • md.comp.date-picker.modal.range-selection.month.subhead.font
    • md.sys.typescale.title-small.font
      • md.ref.typeface.plain
  • md.comp.date-picker.modal.range-selection.month.subhead.weight
    • md.sys.typescale.title-small.weight
      • md.ref.typeface.weight-medium
  • md.comp.date-picker.modal.range-selection.month.subhead.size
    • md.sys.typescale.title-small.size
  • md.comp.date-picker.modal.range-selection.month.subhead.line-height
    • md.sys.typescale.title-small.line-height
  • md.comp.date-picker.modal.range-selection.month.subhead.tracking
    • md.sys.typescale.title-small.tracking
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
Range selection month subhead weightmd.comp.date-picker.modal.range-selection.month.subhead.weight
md.sys.typescale.title-small.weightShow reference chainHide reference chain
md.comp.date-picker.modal.range-selection.month.subhead.weight
  • md.sys.typescale.title-small.weight
    • md.ref.typeface.weight-medium
500
Weekdays
Label Text
Label Text tokens
TokenValue
Weekdays label text fontmd.comp.date-picker.modal.weekdays.label-text.font
md.sys.typescale.body-large.fontShow reference chainHide reference chain
md.comp.date-picker.modal.weekdays.label-text.font
  • md.sys.typescale.body-large.font
    • md.ref.typeface.plain
Roboto
Weekdays label text line heightmd.comp.date-picker.modal.weekdays.label-text.line-height
md.sys.typescale.body-large.line-heightShow reference chainHide reference chain
md.comp.date-picker.modal.weekdays.label-text.line-height
  • md.sys.typescale.body-large.line-height
24pt
Weekdays label text sizemd.comp.date-picker.modal.weekdays.label-text.size
md.sys.typescale.body-large.sizeShow reference chainHide reference chain
md.comp.date-picker.modal.weekdays.label-text.size
  • md.sys.typescale.body-large.size
16pt
Weekdays label text trackingmd.comp.date-picker.modal.weekdays.label-text.tracking
md.sys.typescale.body-large.trackingShow reference chainHide reference chain
md.comp.date-picker.modal.weekdays.label-text.tracking
  • md.sys.typescale.body-large.tracking
0.5pt
Weekdays label text type stylemd.comp.date-picker.modal.weekdays.label-text.type
md.comp.date-picker.modal.weekdays.label-text.fontmd.comp.date-picker.modal.weekdays.label-text.weightmd.comp.date-picker.modal.weekdays.label-text.sizemd.comp.date-picker.modal.weekdays.label-text.line-heightmd.comp.date-picker.modal.weekdays.label-text.trackingShow reference chainHide reference chain
md.comp.date-picker.modal.weekdays.label-text.type
  • md.comp.date-picker.modal.weekdays.label-text.font
    • md.sys.typescale.body-large.font
      • md.ref.typeface.plain
  • md.comp.date-picker.modal.weekdays.label-text.weight
    • md.sys.typescale.body-large.weight
      • md.ref.typeface.weight-regular
  • md.comp.date-picker.modal.weekdays.label-text.size
    • md.sys.typescale.body-large.size
  • md.comp.date-picker.modal.weekdays.label-text.line-height
    • md.sys.typescale.body-large.line-height
  • md.comp.date-picker.modal.weekdays.label-text.tracking
    • md.sys.typescale.body-large.tracking
Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt
Weekdays label text weightmd.comp.date-picker.modal.weekdays.label-text.weight
md.sys.typescale.body-large.weightShow reference chainHide reference chain
md.comp.date-picker.modal.weekdays.label-text.weight
  • md.sys.typescale.body-large.weight
    • md.ref.typeface.weight-regular
400
Year Selection
Year
Year tokens
TokenValue
Year selection year state layer shapemd.comp.date-picker.modal.year-selection.year.state-layer.shape
md.sys.shape.corner.fullShow reference chainHide reference chain
md.comp.date-picker.modal.year-selection.year.state-layer.shape
  • md.sys.shape.corner.full
Circular
Container
Container tokens
TokenValue
Year selection year container heightmd.comp.date-picker.modal.year-selection.year.container.height36dp
Year selection year container widthmd.comp.date-picker.modal.year-selection.year.container.width72dp
Label Text
Label Text tokens
TokenValue
Year selection year label text fontmd.comp.date-picker.modal.year-selection.year.label-text.font
md.sys.typescale.body-large.fontShow reference chainHide reference chain
md.comp.date-picker.modal.year-selection.year.label-text.font
  • md.sys.typescale.body-large.font
    • md.ref.typeface.plain
Roboto
Year selection year label text line heightmd.comp.date-picker.modal.year-selection.year.label-text.line-height
md.sys.typescale.body-large.line-heightShow reference chainHide reference chain
md.comp.date-picker.modal.year-selection.year.label-text.line-height
  • md.sys.typescale.body-large.line-height
24pt
Year selection year label text sizemd.comp.date-picker.modal.year-selection.year.label-text.size
md.sys.typescale.body-large.sizeShow reference chainHide reference chain
md.comp.date-picker.modal.year-selection.year.label-text.size
  • md.sys.typescale.body-large.size
16pt
Year selection year label text trackingmd.comp.date-picker.modal.year-selection.year.label-text.tracking
md.sys.typescale.body-large.trackingShow reference chainHide reference chain
md.comp.date-picker.modal.year-selection.year.label-text.tracking
  • md.sys.typescale.body-large.tracking
0.5pt
Year selection year label text type stylemd.comp.date-picker.modal.year-selection.year.label-text.type
md.comp.date-picker.modal.year-selection.year.label-text.fontmd.comp.date-picker.modal.year-selection.year.label-text.weightmd.comp.date-picker.modal.year-selection.year.label-text.sizemd.comp.date-picker.modal.year-selection.year.label-text.line-heightmd.comp.date-picker.modal.year-selection.year.label-text.trackingShow reference chainHide reference chain
md.comp.date-picker.modal.year-selection.year.label-text.type
  • md.comp.date-picker.modal.year-selection.year.label-text.font
    • md.sys.typescale.body-large.font
      • md.ref.typeface.plain
  • md.comp.date-picker.modal.year-selection.year.label-text.weight
    • md.sys.typescale.body-large.weight
      • md.ref.typeface.weight-regular
  • md.comp.date-picker.modal.year-selection.year.label-text.size
    • md.sys.typescale.body-large.size
  • md.comp.date-picker.modal.year-selection.year.label-text.line-height
    • md.sys.typescale.body-large.line-height
  • md.comp.date-picker.modal.year-selection.year.label-text.tracking
    • md.sys.typescale.body-large.tracking
Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt
Year selection year label text weightmd.comp.date-picker.modal.year-selection.year.label-text.weight
md.sys.typescale.body-large.weightShow reference chainHide reference chain
md.comp.date-picker.modal.year-selection.year.label-text.weight
  • md.sys.typescale.body-large.weight
    • md.ref.typeface.weight-regular
400
State Layer
State Layer tokens
TokenValue
Year selection year state layer heightmd.comp.date-picker.modal.year-selection.year.state-layer.height36dp
Year selection year state layer widthmd.comp.date-picker.modal.year-selection.year.state-layer.width72dp