Component

Material Design 3 buttons 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

[Deprecated] Enabled
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
Elevated button container shapemd.comp.elevated-button.container.shape
Full
Elevated button container heightmd.comp.elevated-button.container.height
40dp
Elevated button container elevationmd.comp.elevated-button.container.elevation
1dp
Elevated button container shadow colormd.comp.elevated-button.container.shadow-color
#000000
Elevated button container colormd.comp.elevated-button.container.color
#F7F2FA
Elevated button container surface tint layer colormd.comp.elevated-button.container.surface-tint-layer.color
#6750A4
[Deprecated] Label text
[Deprecated] Label text tokens
TokenValue
Elevated button label fontmd.comp.elevated-button.label-text.font
Roboto
Elevated button label line heightmd.comp.elevated-button.label-text.line-height
20pt
Elevated button label sizemd.comp.elevated-button.label-text.size
14pt
Elevated button label weightmd.comp.elevated-button.label-text.weight
500
Elevated button label trackingmd.comp.elevated-button.label-text.tracking
0.1pt
Label text type stylemd.comp.elevated-button.label-text.type
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
Elevated button label colormd.comp.elevated-button.label-text.color
#6750A4
[Deprecated] Icon
[Deprecated] Icon tokens
TokenValue
Elevated button with icon icon sizemd.comp.elevated-button.with-icon.icon.size
18dp
Elevated button with icon icon colormd.comp.elevated-button.with-icon.icon.color
#6750A4
[Deprecated] Disabled
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
Elevated button disabled container colormd.comp.elevated-button.disabled.container.color
#1D1B20
Elevated button disabled container opacitymd.comp.elevated-button.disabled.container.opacity
12%
Elevated button disabled container elevationmd.comp.elevated-button.disabled.container.elevation
0dp
[Deprecated] Label text
[Deprecated] Label text tokens
TokenValue
Elevated button disabled label colormd.comp.elevated-button.disabled.label-text.color
#1D1B20
Elevated button disabled label opacitymd.comp.elevated-button.disabled.label-text.opacity
38%
[Deprecated] Icon
[Deprecated] Icon tokens
TokenValue
Elevated button with icon disabled icon colormd.comp.elevated-button.with-icon.disabled.icon.color
#1D1B20
Elevated button with icon disabled icon opacitymd.comp.elevated-button.with-icon.disabled.icon.opacity
38%
[Deprecated] Hovered
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
Elevated button hover container elevationmd.comp.elevated-button.hover.container.elevation
3dp
[Deprecated] Label text
[Deprecated] Label text tokens
TokenValue
Elevated button hover label colormd.comp.elevated-button.hover.label-text.color
#6750A4
[Deprecated] State layer
[Deprecated] State layer tokens
TokenValue
Elevated button hover state layer colormd.comp.elevated-button.hover.state-layer.color
#6750A4
Elevated button hover state layer opacitymd.comp.elevated-button.hover.state-layer.opacity
8%
[Deprecated] Icon
[Deprecated] Icon tokens
TokenValue
Elevated button with icon hover icon colormd.comp.elevated-button.with-icon.hover.icon.color
#6750A4
[Deprecated] Focused
[Deprecated] Focus indicator
[Deprecated] Focus indicator tokens
TokenValue
Elevated button focus indicator colormd.comp.elevated-button.focus.indicator.color
#625B71
Elevated button focus indicator thicknessmd.comp.elevated-button.focus.indicator.thickness
3dp
Elevated button focus indicator offsetmd.comp.elevated-button.focus.indicator.outline.offset
2dp
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
Elevated button focus container elevationmd.comp.elevated-button.focus.container.elevation
1dp
[Deprecated] Label text
[Deprecated] Label text tokens
TokenValue
Elevated button focus label colormd.comp.elevated-button.focus.label-text.color
#6750A4
[Deprecated] State layer
[Deprecated] State layer tokens
TokenValue
Elevated button focus state layer colormd.comp.elevated-button.focus.state-layer.color
#6750A4
Elevated button focus state layer opacitymd.comp.elevated-button.focus.state-layer.opacity
10%
[Deprecated] Icon
[Deprecated] Icon tokens
TokenValue
Elevated button with icon focus icon colormd.comp.elevated-button.with-icon.focus.icon.color
#6750A4
[Deprecated] Pressed (ripple)
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
Elevated button pressed container elevationmd.comp.elevated-button.pressed.container.elevation
1dp
[Deprecated] Label text
[Deprecated] Label text tokens
TokenValue
Elevated button pressed label colormd.comp.elevated-button.pressed.label-text.color
#6750A4
[Deprecated] State layer
[Deprecated] State layer tokens
TokenValue
Elevated button pressed state layer colormd.comp.elevated-button.pressed.state-layer.color
#6750A4
Elevated button pressed state layer opacitymd.comp.elevated-button.pressed.state-layer.opacity
10%
[Deprecated] Icon
[Deprecated] Icon tokens
TokenValue
Elevated button with icon pressed icon colormd.comp.elevated-button.with-icon.pressed.icon.color
#6750A4