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
Enabled tokens
TokenValue
Switch handle elevationmd.comp.switch.handle.elevation
md.sys.elevation.level1Show reference chainHide reference chain
md.comp.switch.handle.elevation
  • md.sys.elevation.level1
1dp
Switch handle shadow colormd.comp.switch.handle.shadow-color
md.sys.color.shadowShow reference chainHide reference chain
md.comp.switch.handle.shadow-color
  • md.sys.color.shadow
    • md.ref.palette.neutral0
#000000
Switch selected handle colormd.comp.switch.selected.handle.color
md.sys.color.on-primaryShow reference chainHide reference chain
md.comp.switch.selected.handle.color
  • md.sys.color.on-primary
    • md.ref.palette.primary100
#FFFFFF
Switch selected icon colormd.comp.switch.selected.icon.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.switch.selected.icon.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Switch selected track colormd.comp.switch.selected.track.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.switch.selected.track.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Switch unselected handle colormd.comp.switch.unselected.handle.color
md.sys.color.outlineShow reference chainHide reference chain
md.comp.switch.unselected.handle.color
  • md.sys.color.outline
    • md.ref.palette.neutral-variant50
#79747E
Switch unselected icon colormd.comp.switch.unselected.icon.color
md.sys.color.surface-container-highestShow reference chainHide reference chain
md.comp.switch.unselected.icon.color
  • md.sys.color.surface-container-highest
    • md.ref.palette.neutral90
#E6E0E9
Switch unselected track colormd.comp.switch.unselected.track.color
md.sys.color.surface-container-highestShow reference chainHide reference chain
md.comp.switch.unselected.track.color
  • md.sys.color.surface-container-highest
    • md.ref.palette.neutral90
#E6E0E9
Switch track outline colormd.comp.switch.unselected.track.outline.color
md.sys.color.outlineShow reference chainHide reference chain
md.comp.switch.unselected.track.outline.color
  • md.sys.color.outline
    • md.ref.palette.neutral-variant50
#79747E
Disabled
Disabled tokens
TokenValue
Switch disabled handle elevationmd.comp.switch.disabled.handle.elevation
md.sys.elevation.level0Show reference chainHide reference chain
md.comp.switch.disabled.handle.elevation
  • md.sys.elevation.level0
No value specified (dp)
Switch disabled handle opacitymd.comp.switch.disabled.handle.opacity38%
Switch disabled selected handle colormd.comp.switch.disabled.selected.handle.color
md.sys.color.surfaceShow reference chainHide reference chain
md.comp.switch.disabled.selected.handle.color
  • md.sys.color.surface
    • md.ref.palette.neutral98
#FEF7FF
Switch disabled selected handle opacitymd.comp.switch.disabled.selected.handle.opacity100%
Switch disabled selected icon colormd.comp.switch.disabled.selected.icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.switch.disabled.selected.icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Switch disabled selected icon opacitymd.comp.switch.disabled.selected.icon.opacity38%
Switch disabled selected track colormd.comp.switch.disabled.selected.track.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.switch.disabled.selected.track.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Switch disabled track opacitymd.comp.switch.disabled.track.opacity12%
Switch disabled unselected handle colormd.comp.switch.disabled.unselected.handle.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.switch.disabled.unselected.handle.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Switch disabled unselected handle opacitymd.comp.switch.disabled.unselected.handle.opacity38%
Switch disabled unselected icon colormd.comp.switch.disabled.unselected.icon.color
md.sys.color.surface-container-highestShow reference chainHide reference chain
md.comp.switch.disabled.unselected.icon.color
  • md.sys.color.surface-container-highest
    • md.ref.palette.neutral90
#E6E0E9
Switch disabled unselected icon opacitymd.comp.switch.disabled.unselected.icon.opacity38%
Switch disabled unselected track colormd.comp.switch.disabled.unselected.track.color
md.sys.color.surface-container-highestShow reference chainHide reference chain
md.comp.switch.disabled.unselected.track.color
  • md.sys.color.surface-container-highest
    • md.ref.palette.neutral90
#E6E0E9
Switch disabled unselected track outline colormd.comp.switch.disabled.unselected.track.outline.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.switch.disabled.unselected.track.outline.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Hovered
Hovered tokens
TokenValue
Switch selected hover handle colormd.comp.switch.selected.hover.handle.color
md.sys.color.primary-containerShow reference chainHide reference chain
md.comp.switch.selected.hover.handle.color
  • md.sys.color.primary-container
    • md.ref.palette.primary90
#EADDFF
Switch selected hover icon colormd.comp.switch.selected.hover.icon.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.switch.selected.hover.icon.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Switch selected hover state layer colormd.comp.switch.selected.hover.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.switch.selected.hover.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Switch selected hover state layer opacitymd.comp.switch.selected.hover.state-layer.opacity
md.sys.state.hover.state-layer-opacityShow reference chainHide reference chain
md.comp.switch.selected.hover.state-layer.opacity
  • md.sys.state.hover.state-layer-opacity
8%
Switch selected hover track colormd.comp.switch.selected.hover.track.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.switch.selected.hover.track.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Switch unselected hover handle colormd.comp.switch.unselected.hover.handle.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.switch.unselected.hover.handle.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
Switch unselected hover icon colormd.comp.switch.unselected.hover.icon.color
md.sys.color.surface-container-highestShow reference chainHide reference chain
md.comp.switch.unselected.hover.icon.color
  • md.sys.color.surface-container-highest
    • md.ref.palette.neutral90
#E6E0E9
Switch unselected hover state layer colormd.comp.switch.unselected.hover.state-layer.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.switch.unselected.hover.state-layer.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Switch unselected hover state layer opacitymd.comp.switch.unselected.hover.state-layer.opacity
md.sys.state.hover.state-layer-opacityShow reference chainHide reference chain
md.comp.switch.unselected.hover.state-layer.opacity
  • md.sys.state.hover.state-layer-opacity
8%
Switch unselected hover track colormd.comp.switch.unselected.hover.track.color
md.sys.color.surface-container-highestShow reference chainHide reference chain
md.comp.switch.unselected.hover.track.color
  • md.sys.color.surface-container-highest
    • md.ref.palette.neutral90
#E6E0E9
Switch unselected hover track outline colormd.comp.switch.unselected.hover.track.outline.color
md.sys.color.outlineShow reference chainHide reference chain
md.comp.switch.unselected.hover.track.outline.color
  • md.sys.color.outline
    • md.ref.palette.neutral-variant50
#79747E
Focused
Focused tokens
TokenValue
Switch focus indicator colormd.comp.switch.focus.indicator.color
md.sys.color.secondaryShow reference chainHide reference chain
md.comp.switch.focus.indicator.color
  • md.sys.color.secondary
    • md.ref.palette.secondary40
#625B71
Switch selected focus handle colormd.comp.switch.selected.focus.handle.color
md.sys.color.primary-containerShow reference chainHide reference chain
md.comp.switch.selected.focus.handle.color
  • md.sys.color.primary-container
    • md.ref.palette.primary90
#EADDFF
Switch selected focus icon colormd.comp.switch.selected.focus.icon.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.switch.selected.focus.icon.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Switch selected focus state layer colormd.comp.switch.selected.focus.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.switch.selected.focus.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Switch selected focus state layer opacitymd.comp.switch.selected.focus.state-layer.opacity
md.sys.state.focus.state-layer-opacityShow reference chainHide reference chain
md.comp.switch.selected.focus.state-layer.opacity
  • md.sys.state.focus.state-layer-opacity
10%
Switch selected focus track colormd.comp.switch.selected.focus.track.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.switch.selected.focus.track.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Switch unselected focus handle colormd.comp.switch.unselected.focus.handle.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.switch.unselected.focus.handle.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
Switch unselected focus icon colormd.comp.switch.unselected.focus.icon.color
md.sys.color.surface-container-highestShow reference chainHide reference chain
md.comp.switch.unselected.focus.icon.color
  • md.sys.color.surface-container-highest
    • md.ref.palette.neutral90
#E6E0E9
Switch unselected focus state layer colormd.comp.switch.unselected.focus.state-layer.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.switch.unselected.focus.state-layer.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Switch unselected focus state layer opacitymd.comp.switch.unselected.focus.state-layer.opacity
md.sys.state.focus.state-layer-opacityShow reference chainHide reference chain
md.comp.switch.unselected.focus.state-layer.opacity
  • md.sys.state.focus.state-layer-opacity
10%
Switch unselected focus track colormd.comp.switch.unselected.focus.track.color
md.sys.color.surface-container-highestShow reference chainHide reference chain
md.comp.switch.unselected.focus.track.color
  • md.sys.color.surface-container-highest
    • md.ref.palette.neutral90
#E6E0E9
Switch unselected focus track outline colormd.comp.switch.unselected.focus.track.outline.color
md.sys.color.outlineShow reference chainHide reference chain
md.comp.switch.unselected.focus.track.outline.color
  • md.sys.color.outline
    • md.ref.palette.neutral-variant50
#79747E
Pressed
Pressed tokens
TokenValue
Switch selected pressed handle colormd.comp.switch.selected.pressed.handle.color
md.sys.color.primary-containerShow reference chainHide reference chain
md.comp.switch.selected.pressed.handle.color
  • md.sys.color.primary-container
    • md.ref.palette.primary90
#EADDFF
Switch selected pressed icon colormd.comp.switch.selected.pressed.icon.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.switch.selected.pressed.icon.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Switch selected pressed state layer colormd.comp.switch.selected.pressed.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.switch.selected.pressed.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Switch selected pressed state layer opacitymd.comp.switch.selected.pressed.state-layer.opacity
md.sys.state.pressed.state-layer-opacityShow reference chainHide reference chain
md.comp.switch.selected.pressed.state-layer.opacity
  • md.sys.state.pressed.state-layer-opacity
10%
Switch selected pressed track colormd.comp.switch.selected.pressed.track.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.switch.selected.pressed.track.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Switch unselected pressed handle colormd.comp.switch.unselected.pressed.handle.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.switch.unselected.pressed.handle.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
Switch unselected pressed icon colormd.comp.switch.unselected.pressed.icon.color
md.sys.color.surface-container-highestShow reference chainHide reference chain
md.comp.switch.unselected.pressed.icon.color
  • md.sys.color.surface-container-highest
    • md.ref.palette.neutral90
#E6E0E9
Switch unselected pressed state layer colormd.comp.switch.unselected.pressed.state-layer.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.switch.unselected.pressed.state-layer.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Switch unselected pressed state layer opacitymd.comp.switch.unselected.pressed.state-layer.opacity
md.sys.state.pressed.state-layer-opacityShow reference chainHide reference chain
md.comp.switch.unselected.pressed.state-layer.opacity
  • md.sys.state.pressed.state-layer-opacity
10%
Switch unselected pressed track colormd.comp.switch.unselected.pressed.track.color
md.sys.color.surface-container-highestShow reference chainHide reference chain
md.comp.switch.unselected.pressed.track.color
  • md.sys.color.surface-container-highest
    • md.ref.palette.neutral90
#E6E0E9
Switch unselected pressed track outline colormd.comp.switch.unselected.pressed.track.outline.color
md.sys.color.outlineShow reference chainHide reference chain
md.comp.switch.unselected.pressed.track.outline.color
  • md.sys.color.outline
    • md.ref.palette.neutral-variant50
#79747E