Component

Material Design 3 floating action buttons (fabs) 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.

[Deprecated] Enabled
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
FAB (large branded) container colormd.comp.fab.branded.large.container.color
#ECE6F0
FAB (large branded) lowered container colormd.comp.fab.branded.large.lowered.container.color
#F7F2FA
FAB (large branded) container shapemd.comp.fab.branded.large.container.shape
28dp
FAB (large branded) container widthmd.comp.fab.branded.large.container.width
96dp
FAB (large branded) container heightmd.comp.fab.branded.large.container.height
96dp
FAB (large branded) container elevationmd.comp.fab.branded.large.container.elevation
6dp
FAB (large branded) container surface tint layer colormd.comp.fab.branded.large.container.surface-tint-layer.color
#6750A4
FAB (large branded) container shadow colormd.comp.fab.branded.large.container.shadow-color
#000000
FAB (large branded) lowered container elevationmd.comp.fab.branded.large.lowered.container.elevation
1dp
[Deprecated] Icon
[Deprecated] Icon tokens
TokenValue
FAB (large branded) icon sizemd.comp.fab.branded.large.icon.size
48dp
FAB (large branded) icon colormd.comp.fab.branded.large.icon.color
#FFFFFF
[Deprecated] Hovered
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
FAB (large branded) lowered hover container elevationmd.comp.fab.branded.large.lowered.hover.container.elevation
3dp
FAB (large branded) hover container elevationmd.comp.fab.branded.large.hover.container.elevation
8dp
[Deprecated] State layer
[Deprecated] State layer tokens
TokenValue
FAB (large branded) hover state layer colormd.comp.fab.branded.large.hover.state-layer.color
#6750A4
FAB (large branded) hover state layer opacitymd.comp.fab.branded.large.hover.state-layer.opacity
8%
[Deprecated] Focused
[Deprecated] Focus indicator
[Deprecated] Focus indicator tokens
TokenValue
FAB (large branded) focus indicator colormd.comp.fab.branded.large.focus.indicator.color
#625B71
FAB (large branded) focus indicator thicknessmd.comp.fab.branded.large.focus.indicator.thickness
3dp
FAB (large branded) focus indicator offsetmd.comp.fab.branded.large.focus.indicator.outline.offset
2dp
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
FAB (large branded) focus focus container elevationmd.comp.fab.branded.large.focus.container.elevation
6dp
FAB (large branded) lowered focus container elevationmd.comp.fab.branded.large.lowered.focus.container.elevation
1dp
[Deprecated] State layer
[Deprecated] State layer tokens
TokenValue
FAB (large branded) focus state layer colormd.comp.fab.branded.large.focus.state-layer.color
#6750A4
FAB (large branded) focus state layer opacitymd.comp.fab.branded.large.focus.state-layer.opacity
10%
[Deprecated] Pressed (ripple)
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
FAB (large branded) lowered pressed container elevationmd.comp.fab.branded.large.lowered.pressed.container.elevation
1dp
FAB (large branded) pressed container elevationmd.comp.fab.branded.large.pressed.container.elevation
6dp
[Deprecated] State layer
[Deprecated] State layer tokens
TokenValue
FAB (large branded) pressed state layer colormd.comp.fab.branded.large.pressed.state-layer.color
#6750A4
FAB (large branded) pressed state layer opacitymd.comp.fab.branded.large.pressed.state-layer.opacity
10%