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 (small tertiary) container colormd.comp.fab.tertiary.small.container.color
#FFD8E4
FAB (small tertiary) container shadow colormd.comp.fab.tertiary.small.container.shadow-color
#000000
FAB (small tertiary) container elevationmd.comp.fab.tertiary.small.container.elevation
6dp
FAB (small tertiary) lowered container elevationmd.comp.fab.tertiary.small.lowered.container.elevation
1dp
FAB (small tertiary) container heightmd.comp.fab.tertiary.small.container.height
40dp
FAB (small tertiary) container shapemd.comp.fab.tertiary.small.container.shape
12dp
FAB (small tertiary) container widthmd.comp.fab.tertiary.small.container.width
40dp
[Deprecated] Icon
[Deprecated] Icon tokens
TokenValue
FAB (small tertiary) icon colormd.comp.fab.tertiary.small.icon.color
#633B48
FAB (small tertiary) icon sizemd.comp.fab.tertiary.small.icon.size
24dp
[Deprecated] Hovered
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
FAB (small tertiary) hover container elevationmd.comp.fab.tertiary.small.hover.container.elevation
8dp
FAB (small tertiary) lowered hover container elevationmd.comp.fab.tertiary.small.lowered.hover.container.elevation
3dp
[Deprecated] State layer
[Deprecated] State layer tokens
TokenValue
FAB (small tertiary) hover state layer colormd.comp.fab.tertiary.small.hover.state-layer.color
#633B48
FAB (small tertiary) hover state layer opacitymd.comp.fab.tertiary.small.hover.state-layer.opacity
8%
[Deprecated] Icon
[Deprecated] Icon tokens
TokenValue
FAB (small tertiary) hover icon colormd.comp.fab.tertiary.small.hover.icon.color
#633B48
[Deprecated] Focused
[Deprecated] Focus indicator
[Deprecated] Focus indicator tokens
TokenValue
FAB (small tertiary) focus indicator colormd.comp.fab.tertiary.small.focus.indicator.color
#625B71
FAB (small tertiary) focus indicator thicknessmd.comp.fab.tertiary.small.focus.indicator.thickness
3dp
FAB (small tertiary) focus indicator offsetmd.comp.fab.tertiary.small.focus.indicator.outline.offset
2dp
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
FAB (small tertiary) focus container elevationmd.comp.fab.tertiary.small.focus.container.elevation
6dp
FAB (small tertiary) lowered focus container elevationmd.comp.fab.tertiary.small.lowered.focus.container.elevation
1dp
[Deprecated] State layer
[Deprecated] State layer tokens
TokenValue
FAB (small tertiary) focus state layer colormd.comp.fab.tertiary.small.focus.state-layer.color
#633B48
FAB (small tertiary) focus state layer opacitymd.comp.fab.tertiary.small.focus.state-layer.opacity
10%
[Deprecated] Icon
[Deprecated] Icon tokens
TokenValue
FAB (small tertiary) focus icon colormd.comp.fab.tertiary.small.focus.icon.color
#633B48
[Deprecated] Pressed (ripple)
[Deprecated] Container
[Deprecated] Container tokens
TokenValue
FAB (small tertiary) pressed container elevationmd.comp.fab.tertiary.small.pressed.container.elevation
6dp
FAB (small tertiary) lowered pressed container elevationmd.comp.fab.tertiary.small.lowered.pressed.container.elevation
1dp
[Deprecated] State layer
[Deprecated] State layer tokens
TokenValue
FAB (small tertiary) pressed state layer colormd.comp.fab.tertiary.small.pressed.state-layer.color
#633B48
FAB (small tertiary) pressed state layer opacitymd.comp.fab.tertiary.small.pressed.state-layer.opacity
10%
[Deprecated] Icon
[Deprecated] Icon tokens
TokenValue
FAB (small tertiary) pressed icon colormd.comp.fab.tertiary.small.pressed.icon.color
#633B48