Component

Material Design 3 button 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
Motion scheme

Enabled
Enabled tokens
TokenValue
Button xlarge between icon label spacemd.comp.button.xlarge.icon-label-space
md.sys.measurement.space200Show reference chainHide reference chain
md.comp.button.xlarge.icon-label-space
  • md.sys.measurement.space200
16dp
Button xlarge label sizemd.comp.button.xlarge.label-text
md.sys.typescale.headline-largeShow reference chainHide reference chain
md.comp.button.xlarge.label-text
  • md.sys.typescale.headline-large
    • md.sys.typescale.headline-large.font
      • md.ref.typeface.brand
    • md.sys.typescale.headline-large.weight
      • md.ref.typeface.weight-regular
    • md.sys.typescale.headline-large.size
    • md.sys.typescale.headline-large.line-height
    • md.sys.typescale.headline-large.tracking
Roboto · 32pt · weight 400 · line height 40pt · tracking No value specified (pt)
Button xlarge leading spacemd.comp.button.xlarge.leading-space
md.sys.measurement.space800Show reference chainHide reference chain
md.comp.button.xlarge.leading-space
  • md.sys.measurement.space800
64dp
Button xlarge trailing spacemd.comp.button.xlarge.trailing-space
md.sys.measurement.space800Show reference chainHide reference chain
md.comp.button.xlarge.trailing-space
  • md.sys.measurement.space800
64dp
Container
Container tokens
TokenValue
Button xlarge container heightmd.comp.button.xlarge.container.height136dp
Shape
Shape tokens
TokenValue
Button xlarge shape roundmd.comp.button.xlarge.container.shape.round
md.sys.shape.corner.fullShow reference chainHide reference chain
md.comp.button.xlarge.container.shape.round
  • md.sys.shape.corner.full
Circular
Button xlarge shape squaremd.comp.button.xlarge.container.shape.square
md.sys.shape.corner.extra-largeShow reference chainHide reference chain
md.comp.button.xlarge.container.shape.square
  • md.sys.shape.corner.extra-large
Rounded Corners · DefaultSize: 28dp
Icon
Icon tokens
TokenValue
Button xlarge icon sizemd.comp.button.xlarge.icon.size40dp
Outlined
Outline
Outline tokens
TokenValue
Button xlarge outline widthmd.comp.button.xlarge.outlined.outline.width3dp
Selected
Container
Shape
Shape tokens
TokenValue
Button xlarge selected container shape roundmd.comp.button.xlarge.selected.container.shape.round
md.sys.shape.corner.extra-largeShow reference chainHide reference chain
md.comp.button.xlarge.selected.container.shape.round
  • md.sys.shape.corner.extra-large
Rounded Corners · DefaultSize: 28dp
Button xlarge selected container shape squaremd.comp.button.xlarge.selected.container.shape.square
md.sys.shape.corner.fullShow reference chainHide reference chain
md.comp.button.xlarge.selected.container.shape.square
  • md.sys.shape.corner.full
Circular
Pressed
Pressed tokens
TokenValue
Button xlarge shape pressed morphmd.comp.button.xlarge.pressed.container.shape
md.sys.shape.corner.largeShow reference chainHide reference chain
md.comp.button.xlarge.pressed.container.shape
  • md.sys.shape.corner.large
Rounded Corners · DefaultSize: 16dp
Container
Corner Size
Motion
Spring
Spring tokens
TokenValue
Button xlarge shape spring animation dampingmd.comp.button.xlarge.pressed.container.corner-size.motion.spring.damping
md.sys.motion.spring.fast.spatial.dampingShow reference chainHide reference chain
md.comp.button.xlarge.pressed.container.corner-size.motion.spring.damping
  • md.sys.motion.spring.fast.spatial.damping
Numeric: 0.6
Button xlarge shape spring animation stiffnessmd.comp.button.xlarge.pressed.container.corner-size.motion.spring.stiffness
md.sys.motion.spring.fast.spatial.stiffnessShow reference chainHide reference chain
md.comp.button.xlarge.pressed.container.corner-size.motion.spring.stiffness
  • md.sys.motion.spring.fast.spatial.stiffness
Numeric: 800