Component

Material Design 3 switch 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
Icon
Icon tokens
TokenValue
Switch selected icon colormd.comp.switch.selected.icon.color
#6750A4
Switch selected icon sizemd.comp.switch.selected.icon.size
16dp
Switch unselected icon colormd.comp.switch.unselected.icon.color
#E6E0E9
Switch unselected icon sizemd.comp.switch.unselected.icon.size
16dp
Track
Track tokens
TokenValue
Switch track heightmd.comp.switch.track.height
32dp
Switch track widthmd.comp.switch.track.width
52dp
Switch track outline colormd.comp.switch.unselected.track.outline.color
#79747E
Switch track outline widthmd.comp.switch.track.outline.width
2dp
Switch track shapemd.comp.switch.track.shape
Full
Switch selected track colormd.comp.switch.selected.track.color
#6750A4
Switch unselected track colormd.comp.switch.unselected.track.color
#E6E0E9
Handle
Handle tokens
TokenValue
Switch unselected handle heightmd.comp.switch.unselected.handle.height
16dp
Switch with icon handle heightmd.comp.switch.with-icon.handle.height
24dp
Switch selected handle heightmd.comp.switch.selected.handle.height
24dp
Switch pressed handle heightmd.comp.switch.pressed.handle.height
28dp
Switch unselected handle widthmd.comp.switch.unselected.handle.width
16dp
Switch with icon handle widthmd.comp.switch.with-icon.handle.width
24dp
Switch selected handle widthmd.comp.switch.selected.handle.width
24dp
Switch pressed handle widthmd.comp.switch.pressed.handle.width
28dp
Switch handle shapemd.comp.switch.handle.shape
Full
Switch selected handle colormd.comp.switch.selected.handle.color
#FFFFFF
Switch unselected handle colormd.comp.switch.unselected.handle.color
#79747E
Switch handle shadow colormd.comp.switch.handle.shadow-color
#000000
Switch handle elevationmd.comp.switch.handle.elevation
1dp
Switch handle heightmd.comp.switch.handle.height
20dp
Switch handle widthmd.comp.switch.handle.width
20dp
State layer
State layer tokens
TokenValue
Switch state layer sizemd.comp.switch.state-layer.size
40dp
Switch state layer shapemd.comp.switch.state-layer.shape
Full
Disabled
Icon
Icon tokens
TokenValue
Switch disabled selected icon colormd.comp.switch.disabled.selected.icon.color
#1D1B20
Switch disabled selected icon opacitymd.comp.switch.disabled.selected.icon.opacity
38%
Switch disabled unselected icon colormd.comp.switch.disabled.unselected.icon.color
#E6E0E9
Switch disabled unselected icon opacitymd.comp.switch.disabled.unselected.icon.opacity
38%
Track
Track tokens
TokenValue
Switch disabled track opacitymd.comp.switch.disabled.track.opacity
12%
Switch disabled selected track colormd.comp.switch.disabled.selected.track.color
#1D1B20
Switch disabled unselected track colormd.comp.switch.disabled.unselected.track.color
#E6E0E9
Switch disabled unselected track outline colormd.comp.switch.disabled.unselected.track.outline.color
#1D1B20
Handle
Handle tokens
TokenValue
Switch disabled unselected handle opacitymd.comp.switch.disabled.unselected.handle.opacity
38%
Switch disabled selected handle opacitymd.comp.switch.disabled.selected.handle.opacity
100%
Switch disabled selected handle colormd.comp.switch.disabled.selected.handle.color
#FEF7FF
Switch disabled unselected handle colormd.comp.switch.disabled.unselected.handle.color
#1D1B20
Switch disabled handle opacitymd.comp.switch.disabled.handle.opacity
38%
Switch disabled handle elevationmd.comp.switch.disabled.handle.elevation
0dp
Hovered
Icon
Icon tokens
TokenValue
Switch selected hover icon colormd.comp.switch.selected.hover.icon.color
#6750A4
Switch unselected hover icon colormd.comp.switch.unselected.hover.icon.color
#E6E0E9
Track
Track tokens
TokenValue
Switch selected hover track colormd.comp.switch.selected.hover.track.color
#6750A4
Switch selected hover state layer colormd.comp.switch.selected.hover.state-layer.color
#6750A4
Switch selected hover state layer opacitymd.comp.switch.selected.hover.state-layer.opacity
8%
Switch unselected hover track colormd.comp.switch.unselected.hover.track.color
#E6E0E9
Switch unselected hover track outline colormd.comp.switch.unselected.hover.track.outline.color
#79747E
Switch unselected hover state layer colormd.comp.switch.unselected.hover.state-layer.color
#1D1B20
Switch unselected hover state layer opacitymd.comp.switch.unselected.hover.state-layer.opacity
8%
Handle
Handle tokens
TokenValue
Switch selected hover handle colormd.comp.switch.selected.hover.handle.color
#EADDFF
Switch unselected hover handle colormd.comp.switch.unselected.hover.handle.color
#49454F
Focused
Focus indicator
Focus indicator tokens
TokenValue
Switch focus indicator colormd.comp.switch.focus.indicator.color
#625B71
Switch focus indicator thicknessmd.comp.switch.focus.indicator.thickness
3dp
Switch focus indicator offsetmd.comp.switch.focus.indicator.offset
2dp
Icon
Icon tokens
TokenValue
Switch selected focus icon colormd.comp.switch.selected.focus.icon.color
#6750A4
Switch unselected focus icon colormd.comp.switch.unselected.focus.icon.color
#E6E0E9
Track
Track tokens
TokenValue
Switch selected focus track colormd.comp.switch.selected.focus.track.color
#6750A4
Switch selected focus state layer colormd.comp.switch.selected.focus.state-layer.color
#6750A4
Switch selected focus state layer opacitymd.comp.switch.selected.focus.state-layer.opacity
10%
Switch unselected focus track colormd.comp.switch.unselected.focus.track.color
#E6E0E9
Switch unselected focus track outline colormd.comp.switch.unselected.focus.track.outline.color
#79747E
Switch unselected focus state layer colormd.comp.switch.unselected.focus.state-layer.color
#1D1B20
Switch unselected focus state layer opacitymd.comp.switch.unselected.focus.state-layer.opacity
10%
Handle
Handle tokens
TokenValue
Switch selected focus handle colormd.comp.switch.selected.focus.handle.color
#EADDFF
Switch unselected focus handle colormd.comp.switch.unselected.focus.handle.color
#49454F
Pressed (ripple)
Icon
Icon tokens
TokenValue
Switch selected pressed icon colormd.comp.switch.selected.pressed.icon.color
#6750A4
Switch unselected pressed icon colormd.comp.switch.unselected.pressed.icon.color
#E6E0E9
Track
Track tokens
TokenValue
Switch selected pressed track colormd.comp.switch.selected.pressed.track.color
#6750A4
Switch selected pressed state layer colormd.comp.switch.selected.pressed.state-layer.color
#6750A4
Switch selected pressed state layer opacitymd.comp.switch.selected.pressed.state-layer.opacity
10%
Switch unselected pressed track colormd.comp.switch.unselected.pressed.track.color
#E6E0E9
Switch unselected pressed track outline colormd.comp.switch.unselected.pressed.track.outline.color
#79747E
Switch unselected pressed state layer colormd.comp.switch.unselected.pressed.state-layer.color
#1D1B20
Switch unselected pressed state layer opacitymd.comp.switch.unselected.pressed.state-layer.opacity
10%
Handle
Handle tokens
TokenValue
Switch selected pressed handle colormd.comp.switch.selected.pressed.handle.color
#EADDFF
Switch unselected pressed handle colormd.comp.switch.unselected.pressed.handle.color
#49454F