Component

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