Component

Material Design 3 split 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 outlined outline colormd.comp.button.outlined.outline.color
#CAC4D0
Button outlined container color - toggle (selected)md.comp.button.outlined.selected.container.color
#322F35
Button outlined label colormd.comp.button.outlined.label-text.color
#49454F
Button outlined label color - toggle (unselected)md.comp.button.outlined.unselected.label-text.color
#49454F
Button outlined label color - toggle (selected)md.comp.button.outlined.selected.label-text.color
#F5EFF7
Button outlined icon colormd.comp.button.outlined.icon.color
#49454F
Button outlined icon color - toggle (unselected)md.comp.button.outlined.unselected.icon.color
#49454F
Button outlined icon color - toggle (selected)md.comp.button.outlined.selected.icon.color
#F5EFF7
Disabled
Disabled tokens
TokenValue
Button outlined disabled outline colormd.comp.button.outlined.disabled.outline.color
#CAC4D0
Button outlined disabled outline color (unselected)md.comp.button.outlined.unselected.disabled.outline.color
#CAC4D0
Button outlined disabled container color (selected)md.comp.button.outlined.selected.disabled.container.color
#1D1B20
Button outlined disabled container opacitymd.comp.button.outlined.disabled.container.opacity
10%
Button outlined disabled label colormd.comp.button.outlined.disabled.label-text.color
#1D1B20
Button outlined disabled label opacitymd.comp.button.outlined.disabled.label-text.opacity
38%
Button outlined disabled icon colormd.comp.button.outlined.disabled.icon.color
#1D1B20
Button outlined disabled icon opacitymd.comp.button.outlined.disabled.icon.opacity
38%
Hovered
Hovered tokens
TokenValue
Button outlined hovered state layer colormd.comp.button.outlined.hovered.state-layer.color
#49454F
Button outlined hovered state layer color - toggle (unselected)md.comp.button.outlined.unselected.hovered.state-layer.color
#49454F
Button outlined hovered state layer color - toggle (selected)md.comp.button.outlined.selected.hovered.state-layer.color
#F5EFF7
Button outlined hovered state layer opacitymd.comp.button.outlined.hovered.state-layer.opacity
8%
Button outlined hovered outline colormd.comp.button.outlined.hovered.outline.color
#CAC4D0
Button outlined hovered outline color - toggle (unselected)md.comp.button.outlined.unselected.hovered.outline.color
#CAC4D0
Button outlined hovered label colormd.comp.button.outlined.hovered.label-text.color
#49454F
Button outlined hovered label color - toggle (unselected)md.comp.button.outlined.unselected.hovered.label-text.color
#49454F
Button outlined hovered label color - toggle (selected)md.comp.button.outlined.selected.hovered.label-text.color
#F5EFF7
Button outlined hovered icon colormd.comp.button.outlined.hovered.icon.color
#49454F
Button outlined hovered icon color - toggle (unselected)md.comp.button.outlined.unselected.hovered.icon.color
#49454F
Button outlined hovered icon color - toggle (selected)md.comp.button.outlined.selected.hovered.icon.color
#F5EFF7
Focused
Focused tokens
TokenValue
Button outlined focused container state layer colormd.comp.button.outlined.focused.state-layer.color
#49454F
Button outlined focused container state layer color - toggle (unselected)md.comp.button.outlined.unselected.focused.state-layer.color
#49454F
Button outlined focused container state layer color - toggle (selected)md.comp.button.outlined.selected.focused.state-layer.color
#F5EFF7
Button outlined focused container state layer opacitymd.comp.button.outlined.focused.state-layer.opacity
10%
Button outlined focused outline colormd.comp.button.outlined.focused.outline.color
#CAC4D0
Button outlined focused outline color - toggle (unselected)md.comp.button.outlined.unselected.focused.outline.color
#CAC4D0
Button outlined focused label colormd.comp.button.outlined.focused.label-text.color
#49454F
Button outlined focused label color - toggle (unselected)md.comp.button.outlined.unselected.focused.label-text.color
#49454F
Button outlined focused label color - toggle (selected)md.comp.button.outlined.selected.focused.label-text.color
#F5EFF7
Button outlined focused icon colormd.comp.button.outlined.focused.icon.color
#49454F
Button outlined focused icon color - toggle (unselected)md.comp.button.outlined.unselected.focused.icon.color
#49454F
Button outlined focused icon color - toggle (selected)md.comp.button.outlined.selected.focused.icon.color
#F5EFF7
Pressed
Pressed tokens
TokenValue
Button outlined pressed container state layer colormd.comp.button.outlined.pressed.state-layer.color
#49454F
Button outlined pressed container state layer color - toggle (unselected)md.comp.button.outlined.unselected.pressed.state-layer.color
#49454F
Button outlined pressed container state layer color - toggle (selected)md.comp.button.outlined.selected.pressed.state-layer.color
#F5EFF7
Button outlined pressed container state layer opacitymd.comp.button.outlined.pressed.state-layer.opacity
10%
Button outlined pressed outline colormd.comp.button.outlined.pressed.outline.color
#CAC4D0
Button outlined pressed outline color - toggle (unselected)md.comp.button.outlined.unselected.pressed.outline.color
#CAC4D0
Button outlined pressed label colormd.comp.button.outlined.pressed.label-text.color
#49454F
Button outlined pressed label color - toggle (unselected)md.comp.button.outlined.unselected.pressed.label-text.color
#49454F
Button outlined pressed label color - toggle (selected)md.comp.button.outlined.selected.pressed.label-text.color
#F5EFF7
Button outlined pressed icon colormd.comp.button.outlined.pressed.icon.color
#49454F
Button outlined pressed icon color - toggle (unselected)md.comp.button.outlined.unselected.pressed.icon.color
#49454F
Button outlined pressed icon color - toggle (selected)md.comp.button.outlined.selected.pressed.icon.color
#F5EFF7