Component

Material Design 3 FAB 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
FAB (surface) container colormd.comp.fab.surface.container.color
md.sys.color.surface-container-highShow reference chainHide reference chain
md.comp.fab.surface.container.color
  • md.sys.color.surface-container-high
    • md.ref.palette.neutral92
#ECE6F0
FAB (surface) container elevationmd.comp.fab.surface.container.elevation
md.sys.elevation.level3Show reference chainHide reference chain
md.comp.fab.surface.container.elevation
  • md.sys.elevation.level3
6dp
FAB (surface) container shadow colormd.comp.fab.surface.container.shadow-color
md.sys.color.shadowShow reference chainHide reference chain
md.comp.fab.surface.container.shadow-color
  • md.sys.color.shadow
    • md.ref.palette.neutral0
#000000
FAB (surface) container surface tint layer colormd.comp.fab.surface.container.surface-tint-layer.color
md.sys.color.surface-tintShow reference chainHide reference chain
md.comp.fab.surface.container.surface-tint-layer.color
  • md.sys.color.surface-tint
    • md.sys.color.primary
      • md.ref.palette.primary40
#6750A4
FAB (surface) icon colormd.comp.fab.surface.icon.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.fab.surface.icon.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (large surface) container colormd.comp.fab.surface.large.container.color
md.sys.color.surface-container-highShow reference chainHide reference chain
md.comp.fab.surface.large.container.color
  • md.sys.color.surface-container-high
    • md.ref.palette.neutral92
#ECE6F0
FAB (large surface) container elevationmd.comp.fab.surface.large.container.elevation
md.sys.elevation.level3Show reference chainHide reference chain
md.comp.fab.surface.large.container.elevation
  • md.sys.elevation.level3
6dp
FAB (large surface) container shadow colormd.comp.fab.surface.large.container.shadow-color
md.sys.color.shadowShow reference chainHide reference chain
md.comp.fab.surface.large.container.shadow-color
  • md.sys.color.shadow
    • md.ref.palette.neutral0
#000000
FAB (large surface) container surface tint layer colormd.comp.fab.surface.large.container.surface-tint-layer.color
md.sys.color.surface-tintShow reference chainHide reference chain
md.comp.fab.surface.large.container.surface-tint-layer.color
  • md.sys.color.surface-tint
    • md.sys.color.primary
      • md.ref.palette.primary40
#6750A4
FAB (large surface) icon colormd.comp.fab.surface.large.icon.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.fab.surface.large.icon.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (large surface) lowered container colormd.comp.fab.surface.large.lowered.container.color
md.sys.color.surface-container-lowShow reference chainHide reference chain
md.comp.fab.surface.large.lowered.container.color
  • md.sys.color.surface-container-low
    • md.ref.palette.neutral96
#F7F2FA
FAB (large surface) lowered container elevationmd.comp.fab.surface.large.lowered.container.elevation
md.sys.elevation.level1Show reference chainHide reference chain
md.comp.fab.surface.large.lowered.container.elevation
  • md.sys.elevation.level1
1dp
FAB (surface) lowered container colormd.comp.fab.surface.lowered.container.color
md.sys.color.surface-container-lowShow reference chainHide reference chain
md.comp.fab.surface.lowered.container.color
  • md.sys.color.surface-container-low
    • md.ref.palette.neutral96
#F7F2FA
Surface FAB lowered container elevationmd.comp.fab.surface.lowered.container.elevation
md.sys.elevation.level1Show reference chainHide reference chain
md.comp.fab.surface.lowered.container.elevation
  • md.sys.elevation.level1
1dp
FAB (small surface) container colormd.fab.surface.small.container.color
md.sys.color.surface-container-highShow reference chainHide reference chain
md.fab.surface.small.container.color
  • md.sys.color.surface-container-high
    • md.ref.palette.neutral92
#ECE6F0
FAB (small surface) container elevationmd.fab.surface.small.container.elevation
md.sys.elevation.level3Show reference chainHide reference chain
md.fab.surface.small.container.elevation
  • md.sys.elevation.level3
6dp
FAB (small surface) container shadow colormd.fab.surface.small.container.shadow-color
md.sys.color.shadowShow reference chainHide reference chain
md.fab.surface.small.container.shadow-color
  • md.sys.color.shadow
    • md.ref.palette.neutral0
#000000
FAB (small surface) container surface tint layer colormd.fab.surface.small.container.surface-tint-layer.color
md.sys.color.surface-tintShow reference chainHide reference chain
md.fab.surface.small.container.surface-tint-layer.color
  • md.sys.color.surface-tint
    • md.sys.color.primary
      • md.ref.palette.primary40
#6750A4
FAB (small surface) icon colormd.fab.surface.small.icon.color
md.sys.color.primaryShow reference chainHide reference chain
md.fab.surface.small.icon.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (small surface) lowered container colormd.fab.surface.small.lowered.container.color
md.sys.color.surface-container-lowShow reference chainHide reference chain
md.fab.surface.small.lowered.container.color
  • md.sys.color.surface-container-low
    • md.ref.palette.neutral96
#F7F2FA
FAB (small surface) lowered container elevationmd.fab.surface.small.lowered.container.elevation
md.sys.elevation.level1Show reference chainHide reference chain
md.fab.surface.small.lowered.container.elevation
  • md.sys.elevation.level1
1dp
Hovered
Hovered tokens
TokenValue
FAB (surface) hover container elevationmd.comp.fab.surface.hover.container.elevation
md.sys.elevation.level4Show reference chainHide reference chain
md.comp.fab.surface.hover.container.elevation
  • md.sys.elevation.level4
8dp
FAB (surface) hover icon colormd.comp.fab.surface.hover.icon.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.fab.surface.hover.icon.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (surface) hover state layer colormd.comp.fab.surface.hover.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.fab.surface.hover.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (surface) hover state layer opacitymd.comp.fab.surface.hover.state-layer.opacity
md.sys.state.hover.state-layer-opacityShow reference chainHide reference chain
md.comp.fab.surface.hover.state-layer.opacity
  • md.sys.state.hover.state-layer-opacity
8%
FAB (large surface) hover container elevationmd.comp.fab.surface.large.hover.container.elevation
md.sys.elevation.level4Show reference chainHide reference chain
md.comp.fab.surface.large.hover.container.elevation
  • md.sys.elevation.level4
8dp
FAB (large surface) hover icon colormd.comp.fab.surface.large.hover.icon.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.fab.surface.large.hover.icon.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (large surface) hover state layer colormd.comp.fab.surface.large.hover.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.fab.surface.large.hover.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (large surface) hover state layer opacitymd.comp.fab.surface.large.hover.state-layer.opacity
md.sys.state.hover.state-layer-opacityShow reference chainHide reference chain
md.comp.fab.surface.large.hover.state-layer.opacity
  • md.sys.state.hover.state-layer-opacity
8%
FAB (large surface) lowered hover container elevationmd.comp.fab.surface.large.lowered.hover.container.elevation
md.sys.elevation.level2Show reference chainHide reference chain
md.comp.fab.surface.large.lowered.hover.container.elevation
  • md.sys.elevation.level2
3dp
Surface FAB lowered hover container elevationmd.comp.fab.surface.lowered.hover.container.elevation
md.sys.elevation.level2Show reference chainHide reference chain
md.comp.fab.surface.lowered.hover.container.elevation
  • md.sys.elevation.level2
3dp
FAB (small surface) hover container elevationmd.fab.surface.small.hover.container.elevation
md.sys.elevation.level4Show reference chainHide reference chain
md.fab.surface.small.hover.container.elevation
  • md.sys.elevation.level4
8dp
FAB (small surface) hover icon colormd.fab.surface.small.hover.icon.color
md.sys.color.primaryShow reference chainHide reference chain
md.fab.surface.small.hover.icon.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (small surface) hover state layer colormd.fab.surface.small.hover.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.fab.surface.small.hover.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (small surface) hover state layer opacitymd.fab.surface.small.hover.state-layer.opacity
md.sys.state.hover.state-layer-opacityShow reference chainHide reference chain
md.fab.surface.small.hover.state-layer.opacity
  • md.sys.state.hover.state-layer-opacity
8%
FAB (small surface) lowered hover container elevationmd.fab.surface.small.lowered.hover.container.elevation
md.sys.elevation.level2Show reference chainHide reference chain
md.fab.surface.small.lowered.hover.container.elevation
  • md.sys.elevation.level2
3dp
Focused
Focused tokens
TokenValue
Surface FAB focus container elevationmd.comp.fab.surface.focus.container.elevation
md.sys.elevation.level3Show reference chainHide reference chain
md.comp.fab.surface.focus.container.elevation
  • md.sys.elevation.level3
6dp
FAB (surface) focus icon colormd.comp.fab.surface.focus.icon.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.fab.surface.focus.icon.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (surface) focus indicator colormd.comp.fab.surface.focus.indicator.color
md.sys.color.secondaryShow reference chainHide reference chain
md.comp.fab.surface.focus.indicator.color
  • md.sys.color.secondary
    • md.ref.palette.secondary40
#625B71
FAB (surface) focus state layer colormd.comp.fab.surface.focus.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.fab.surface.focus.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (surface) focus state layer opacitymd.comp.fab.surface.focus.state-layer.opacity
md.sys.state.focus.state-layer-opacityShow reference chainHide reference chain
md.comp.fab.surface.focus.state-layer.opacity
  • md.sys.state.focus.state-layer-opacity
10%
FAB (large surface) focus container elevationmd.comp.fab.surface.large.focus.container.elevation
md.sys.elevation.level3Show reference chainHide reference chain
md.comp.fab.surface.large.focus.container.elevation
  • md.sys.elevation.level3
6dp
FAB (large surface) focus icon colormd.comp.fab.surface.large.focus.icon.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.fab.surface.large.focus.icon.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (large surface) focus indicator colormd.comp.fab.surface.large.focus.indicator.color
md.sys.color.secondaryShow reference chainHide reference chain
md.comp.fab.surface.large.focus.indicator.color
  • md.sys.color.secondary
    • md.ref.palette.secondary40
#625B71
FAB (large surface) focus state layer colormd.comp.fab.surface.large.focus.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.fab.surface.large.focus.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (large surface) focus state layer opacitymd.comp.fab.surface.large.focus.state-layer.opacity
md.sys.state.focus.state-layer-opacityShow reference chainHide reference chain
md.comp.fab.surface.large.focus.state-layer.opacity
  • md.sys.state.focus.state-layer-opacity
10%
FAB (large surface) lowered focus container elevationmd.comp.fab.surface.large.lowered.focus.container.elevation
md.sys.elevation.level1Show reference chainHide reference chain
md.comp.fab.surface.large.lowered.focus.container.elevation
  • md.sys.elevation.level1
1dp
Surface FAB lowered focus container elevationmd.comp.fab.surface.lowered.focus.container.elevation
md.sys.elevation.level1Show reference chainHide reference chain
md.comp.fab.surface.lowered.focus.container.elevation
  • md.sys.elevation.level1
1dp
FAB (small surface) focus container elevationmd.fab.surface.small.focus.container.elevation
md.sys.elevation.level3Show reference chainHide reference chain
md.fab.surface.small.focus.container.elevation
  • md.sys.elevation.level3
6dp
FAB (small surface) focus icon colormd.fab.surface.small.focus.icon.color
md.sys.color.primaryShow reference chainHide reference chain
md.fab.surface.small.focus.icon.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (small surface) focus indicator colormd.fab.surface.small.focus.indicator.color
md.sys.color.secondaryShow reference chainHide reference chain
md.fab.surface.small.focus.indicator.color
  • md.sys.color.secondary
    • md.ref.palette.secondary40
#625B71
FAB (small surface) focus state layer colormd.fab.surface.small.focus.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.fab.surface.small.focus.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (small surface) focus state layer opacitymd.fab.surface.small.focus.state-layer.opacity
md.sys.state.focus.state-layer-opacityShow reference chainHide reference chain
md.fab.surface.small.focus.state-layer.opacity
  • md.sys.state.focus.state-layer-opacity
10%
FAB (small surface) lowered focus container elevationmd.fab.surface.small.lowered.focus.container.elevation
md.sys.elevation.level1Show reference chainHide reference chain
md.fab.surface.small.lowered.focus.container.elevation
  • md.sys.elevation.level1
1dp
Pressed
Pressed tokens
TokenValue
FAB (large surface) lowered pressed container elevationmd.comp.fab.surface.large.lowered.pressed.container.elevation
md.sys.elevation.level1Show reference chainHide reference chain
md.comp.fab.surface.large.lowered.pressed.container.elevation
  • md.sys.elevation.level1
1dp
FAB (large surface) pressed container elevationmd.comp.fab.surface.large.pressed.container.elevation
md.sys.elevation.level3Show reference chainHide reference chain
md.comp.fab.surface.large.pressed.container.elevation
  • md.sys.elevation.level3
6dp
FAB (large surface) pressed icon colormd.comp.fab.surface.large.pressed.icon.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.fab.surface.large.pressed.icon.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (large surface) pressed state layer colormd.comp.fab.surface.large.pressed.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.fab.surface.large.pressed.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (large surface) pressed state layer opacitymd.comp.fab.surface.large.pressed.state-layer.opacity
md.sys.state.pressed.state-layer-opacityShow reference chainHide reference chain
md.comp.fab.surface.large.pressed.state-layer.opacity
  • md.sys.state.pressed.state-layer-opacity
10%
Surface FAB lowered pressed container elevationmd.comp.fab.surface.lowered.pressed.container.elevation
md.sys.elevation.level1Show reference chainHide reference chain
md.comp.fab.surface.lowered.pressed.container.elevation
  • md.sys.elevation.level1
1dp
FAB (surface) pressed container elevationmd.comp.fab.surface.pressed.container.elevation
md.sys.elevation.level3Show reference chainHide reference chain
md.comp.fab.surface.pressed.container.elevation
  • md.sys.elevation.level3
6dp
FAB (surface) pressed icon colormd.comp.fab.surface.pressed.icon.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.fab.surface.pressed.icon.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (surface) pressed state layer colormd.comp.fab.surface.pressed.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.fab.surface.pressed.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (surface) pressed state layer opacitymd.comp.fab.surface.pressed.state-layer.opacity
md.sys.state.pressed.state-layer-opacityShow reference chainHide reference chain
md.comp.fab.surface.pressed.state-layer.opacity
  • md.sys.state.pressed.state-layer-opacity
10%
FAB (small surface) lowered pressed container elevationmd.fab.surface.small.lowered.pressed.container.elevation
md.sys.elevation.level1Show reference chainHide reference chain
md.fab.surface.small.lowered.pressed.container.elevation
  • md.sys.elevation.level1
1dp
FAB (small surface) pressed container elevationmd.fab.surface.small.pressed.container.elevation
md.sys.elevation.level3Show reference chainHide reference chain
md.fab.surface.small.pressed.container.elevation
  • md.sys.elevation.level3
6dp
FAB (small surface) pressed icon colormd.fab.surface.small.pressed.icon.color
md.sys.color.primaryShow reference chainHide reference chain
md.fab.surface.small.pressed.icon.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (small surface) pressed state layer colormd.fab.surface.small.pressed.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.fab.surface.small.pressed.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
FAB (small surface) pressed state layer opacitymd.fab.surface.small.pressed.state-layer.opacity
md.sys.state.pressed.state-layer-opacityShow reference chainHide reference chain
md.fab.surface.small.pressed.state-layer.opacity
  • md.sys.state.pressed.state-layer-opacity
10%