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.

Enabled
Enabled tokens
TokenValue
Button elevated container colormd.comp.button.elevated.container.color
#F7F2FA
Button elevated container color - toggle (unselected)md.comp.button.elevated.unselected.container.color
#F7F2FA
Button elevated container color - toggle (selected)md.comp.button.elevated.selected.container.color
#6750A4
Button elevated shadow colormd.comp.button.elevated.container.shadow-color
#000000
Button elevated elevationmd.comp.button.elevated.container.elevation
1dp
Button elevated label colormd.comp.button.elevated.label-text.color
#6750A4
Button elevated label color - toggle (unselected)md.comp.button.elevated.unselected.label-text.color
#6750A4
Button elevated label color - toggle (selected)md.comp.button.elevated.selected.label-text.color
#FFFFFF
Button elevated icon colormd.comp.button.elevated.icon.color
#6750A4
Button elevated icon color - toggle (unselected)md.comp.button.elevated.unselected.icon.color
#6750A4
Button elevated icon color - toggle (selected)md.comp.button.elevated.selected.icon.color
#FFFFFF
Disabled
Disabled tokens
TokenValue
Button elevated disabled container colormd.comp.button.elevated.disabled.container.color
#1D1B20
Button elevated disabled container opacitymd.comp.button.elevated.disabled.container.opacity
10%
Button elevated disabled container elevationmd.comp.button.elevated.disabled.container.elevation
0dp
Button elevated disabled label colormd.comp.button.elevated.disabled.label-text.color
#1D1B20
Button elevated disabled label opacitymd.comp.button.elevated.disabled.label-text.opacity
38%
Button elevated disabled icon colormd.comp.button.elevated.disabled.icon.color
#1D1B20
Button elevated disabled icon opacitymd.comp.button.elevated.disabled.icon.opacity
38%
Hovered
Hovered tokens
TokenValue
Button elevated hovered container state layer colormd.comp.button.elevated.hovered.state-layer.color
#6750A4
Button elevated hovered container state layer color - toggle (unselected)md.comp.button.elevated.unselected.hovered.state-layer.color
#6750A4
Button elevated hovered container state layer color - toggle (selected)md.comp.button.elevated.selected.hovered.state-layer.color
#FFFFFF
Button elevated hovered container state layer opacitymd.comp.button.elevated.hovered.state-layer.opacity
8%
Button elevated hovered container elevationmd.comp.button.elevated.hovered.container.elevation
3dp
Button elevated hovered label colormd.comp.button.elevated.hovered.label-text.color
#6750A4
Button elevated hovered label color - toggle (unselected)md.comp.button.elevated.unselected.hovered.label-text.color
#6750A4
Button elevated hovered label color - toggle (selected)md.comp.button.elevated.selected.hovered.label-text.color
#FFFFFF
Button elevated hovered icon colormd.comp.button.elevated.hovered.icon.color
#6750A4
Button elevated hovered icon color - toggle (unselected)md.comp.button.elevated.unselected.hovered.icon.color
#6750A4
Button elevated hovered icon color - toggle (selected)md.comp.button.elevated.selected.hovered.icon.color
#FFFFFF
Focused
Focused tokens
TokenValue
Button elevated focused container state layer colormd.comp.button.elevated.focused.state-layer.color
#6750A4
Button elevated focused container state layer color - toggle (unselected)md.comp.button.elevated.unselected.focused.state-layer.color
#6750A4
Button elevated focused container state layer color - toggle (selected)md.comp.button.elevated.selected.focused.state-layer.color
#FFFFFF
Button elevated focused container state layer opacitymd.comp.button.elevated.focused.state-layer.opacity
10%
Button elevated focused container state layer elevationmd.comp.button.elevated.focused.container.elevation
1dp
Button elevated focused label colormd.comp.button.elevated.focused.label-text.color
#6750A4
Button elevated focused label color - toggle (unselected)md.comp.button.elevated.unselected.focused.label-text.color
#6750A4
Button elevated focused label color - toggle (selected)md.comp.button.elevated.selected.focused.label-text.color
#FFFFFF
Button elevated focused icon colormd.comp.button.elevated.focused.icon.color
#6750A4
Button elevated focused icon color - toggle (unselected)md.comp.button.elevated.unselected.focused.icon.color
#6750A4
Button elevated focused icon color - toggle (selected)md.comp.button.elevated.selected.focused.icon.color
#FFFFFF
Pressed
Pressed tokens
TokenValue
Button elevated pressed container state layer colormd.comp.button.elevated.pressed.state-layer.color
#6750A4
Button elevated pressed container state layer color - toggle (unselected)md.comp.button.elevated.unselected.pressed.state-layer.color
#6750A4
Button elevated pressed container state layer color - toggle (selected)md.comp.button.elevated.selected.pressed.state-layer.color
#FFFFFF
Button elevated pressed container state layer opacitymd.comp.button.elevated.pressed.state-layer.opacity
10%
Button elevated pressed container state layer elevationmd.comp.button.elevated.pressed.container.elevation
1dp
Button elevated pressed label colormd.comp.button.elevated.pressed.label-text.color
#6750A4
Button elevated pressed label color - toggle (unselected)md.comp.button.elevated.unselected.pressed.label-text.color
#6750A4
Button elevated pressed label color - toggle (selected)md.comp.button.elevated.selected.pressed.label-text.color
#FFFFFF
Button elevated pressed icon colormd.comp.button.elevated.pressed.icon.color
#6750A4
Button elevated pressed icon color - toggle (unselected)md.comp.button.elevated.unselected.pressed.icon.color
#6750A4
Button elevated pressed icon color - toggle (selected)md.comp.button.elevated.selected.pressed.icon.color
#FFFFFF