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
Filled tonal button container colormd.comp.filled-tonal-button.container.color
#E8DEF8
Filled tonal button container shadow colormd.comp.filled-tonal-button.container.shadow-color
#000000
Filled tonal button container elevationmd.comp.filled-tonal-button.container.elevation
0dp
Filled tonal button container heightmd.comp.filled-tonal-button.container.height
40dp
Filled tonal button container shapemd.comp.filled-tonal-button.container.shape
Full
[Deprecated] Label text
[Deprecated] Label text tokens
TokenValue
Filled tonal button label text colormd.comp.filled-tonal-button.label-text.color
#4A4458
Filled tonal button label text fontmd.comp.filled-tonal-button.label-text.font
Roboto
Filled tonal button label text line heightmd.comp.filled-tonal-button.label-text.line-height
20pt
Filled tonal button label text sizemd.comp.filled-tonal-button.label-text.size
14pt
Filled tonal button label text trackingmd.comp.filled-tonal-button.label-text.tracking
0.1pt
Filled tonal button label text weightmd.comp.filled-tonal-button.label-text.weight
500
Filled tonal button label text typemd.comp.filled-tonal-button.label-text.type
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
[Deprecated] Icon
[Deprecated] Icon tokens
TokenValue
Filled tonal button icon colormd.comp.filled-tonal-button.with-icon.icon.color
#4A4458
Filled tonal button icon sizemd.comp.filled-tonal-button.with-icon.icon.size
18dp
[Deprecated] Disabled
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
Filled tonal button disabled container colormd.comp.filled-tonal-button.disabled.container.color
#1D1B20
Filled tonal button disabled container elevationmd.comp.filled-tonal-button.disabled.container.elevation
0dp
Filled tonal button disabled container opacitymd.comp.filled-tonal-button.disabled.container.opacity
12%
[Deprecated] Label text
[Deprecated] Label text tokens
TokenValue
Filled tonal button disabled label text colormd.comp.filled-tonal-button.disabled.label-text.color
#1D1B20
Filled tonal button disabled label text opacitymd.comp.filled-tonal-button.disabled.label-text.opacity
38%
[Deprecated] Icon
[Deprecated] Icon tokens
TokenValue
Filled tonal button disabled icon colormd.comp.filled-tonal-button.with-icon.disabled.icon.color
#1D1B20
Filled tonal button disabled icon opacitymd.comp.filled-tonal-button.with-icon.disabled.icon.opacity
38%
[Deprecated] Hovered
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
Filled tonal button hover container elevationmd.comp.filled-tonal-button.hover.container.elevation
1dp
[Deprecated] Label text
[Deprecated] Label text tokens
TokenValue
Filled tonal button hover label text colormd.comp.filled-tonal-button.hover.label-text.color
#4A4458
[Deprecated] State layer
[Deprecated] State layer tokens
TokenValue
Filled tonal button hover state layer colormd.comp.filled-tonal-button.hover.state-layer.color
#4A4458
Filled tonal button hover state layer opacitymd.comp.filled-tonal-button.hover.state-layer.opacity
8%
[Deprecated] Icon
[Deprecated] Icon tokens
TokenValue
Filled tonal button hover icon colormd.comp.filled-tonal-button.with-icon.hover.icon.color
#4A4458
[Deprecated] Focused
[Deprecated] Focus indicator
[Deprecated] Focus indicator tokens
TokenValue
Filled tonal button focus indicator colormd.comp.filled-tonal-button.focus.indicator.color
#625B71
Filled tonal button focus indicator thicknessmd.comp.filled-tonal-button.focus.indicator.thickness
3dp
Filled tonal button focus indicator offsetmd.comp.filled-tonal-button.focus.indicator.outline.offset
2dp
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
Filled tonal button focus container elevationmd.comp.filled-tonal-button.focus.container.elevation
0dp
[Deprecated] Label text
[Deprecated] Label text tokens
TokenValue
Filled tonal button focus label text colormd.comp.filled-tonal-button.focus.label-text.color
#4A4458
[Deprecated] State layer
[Deprecated] State layer tokens
TokenValue
Filled tonal button focus state layer colormd.comp.filled-tonal-button.focus.state-layer.color
#4A4458
Filled tonal button focus state layer opacitymd.comp.filled-tonal-button.focus.state-layer.opacity
10%
[Deprecated] Icon
[Deprecated] Icon tokens
TokenValue
Filled tonal button focus icon colormd.comp.filled-tonal-button.with-icon.focus.icon.color
#4A4458
[Deprecated] Pressed (ripple)
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
Filled tonal button pressed container elevationmd.comp.filled-tonal-button.pressed.container.elevation
0dp
[Deprecated] Label text
[Deprecated] Label text tokens
TokenValue
Filled tonal button pressed label text colormd.comp.filled-tonal-button.pressed.label-text.color
#4A4458
[Deprecated] State layer
[Deprecated] State layer tokens
TokenValue
Filled tonal button pressed state layer colormd.comp.filled-tonal-button.pressed.state-layer.color
#4A4458
Filled tonal button pressed state layer opacitymd.comp.filled-tonal-button.pressed.state-layer.opacity
10%
[Deprecated] Icon
[Deprecated] Icon tokens
TokenValue
Filled tonal button pressed icon colormd.comp.filled-tonal-button.with-icon.pressed.icon.color
#4A4458