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