Component

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