FABs

Floating action buttons (FABs) help people take primary actions. They’re used to represent the most important action on a screen, such as Create or Reply.

Overview · Specs · Guidelines · Accessibility

Variants

1. FAB
2. Medium FAB
3. Large FAB

Baseline variants

The small FAB is still available, but no longer recommended. Jump to baseline specs

1. Small FAB

Variant	M3	M3 Expressive
FAB	Available	Available
Medium FAB	--	Available
Large FAB	Available	Available
Small FAB	Available	Not recommended. Use a larger size.

Configurations

In the expressive update, the primary, secondary, and tertiary set colors were renamed to primary container, secondary container, and tertiary container to match the actual color roles used. New primary, secondary, and tertiary color styles were created to match the corresponding color roles. View details in the color styles section

Category	Configuration	M3	M3 Expressive
Color	Primary container, secondary container, tertiary container	Available as primary, secondary, tertiary	Available
Color	Primary. secondary, tertiary	--	Available

Tokens & specs

Use the table's menu to select a token set. FAB tokens are organized by size and color. Learn more about design tokens

Design tokens

Token table

Machine-readable relationship table

Floating action buttons (FABs) tokens · 9 token sets · 165 tokens · live token table · DSDB TOKEN_TABLE.41587918e51cca98

• Default context: Theme: Light · Platform: Android · Audience: 3P · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
• Not configurable here (group default used): Motion scheme: Standard · Font: Static · Language height: Small
• Other contexts: Theme: Dark · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
• Reference chain: aliases from the token to its source value (token → alias → … → value). "—" means the token holds a literal value.

FAB - Size - Regular · md.comp.fab · 4 tokens

For the default, regular FAB size.

Group	Token	Type	Reference chain	Resolved value	Other contexts
All tokens	md.comp.fab.container.height	Length	—	56dp	—
All tokens	md.comp.fab.container.width	Length	—	56dp	—
All tokens	md.comp.fab.icon.size	Length	—	24dp	—
All tokens	md.comp.fab.container.shape	Shape	md.sys.shape.corner.large	Rounded corners 16dp	—

FAB - Size - Medium · md.comp.fab.medium · 4 tokens

For medium FABs.

Group	Token	Type	Reference chain	Resolved value	Other contexts
All tokens	md.comp.fab.medium.container.height	Length	—	80dp	—
All tokens	md.comp.fab.medium.container.width	Length	—	80dp	—
All tokens	md.comp.fab.medium.icon.size	Length	—	28dp	—
All tokens	md.comp.fab.medium.container.shape	Shape	md.sys.shape.corner.large-increased	Rounded corners 20dp	—

FAB - Size - Large · md.comp.fab.large · 4 tokens

For large FABs.

Group	Token	Type	Reference chain	Resolved value	Other contexts
All tokens	md.comp.fab.large.container.height	Length	—	96dp	—
All tokens	md.comp.fab.large.container.width	Length	—	96dp	—
All tokens	md.comp.fab.large.icon.size	Length	—	36dp	—
All tokens	md.comp.fab.large.container.shape	Shape	md.sys.shape.corner.extra-large	Rounded corners 28dp	—

FAB - Color - Tonal primary · md.comp.fab.primary-container · 16 tokens

For tonal primary container FABs.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled	md.comp.fab.primary-container.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Enabled	md.comp.fab.primary-container.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Enabled	md.comp.fab.primary-container.icon.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#4F378B	Dark: #EADDFF via md.ref.palette.primary90 Medium contrast: #FFFFFF via md.ref.palette.primary100 High contrast: #FFFFFF via md.ref.palette.primary100
Enabled	md.comp.fab.primary-container.container.color	Color	md.sys.color.primary-container → md.ref.palette.primary90	#EADDFF	Dark: #4F378B via md.ref.palette.primary30 Medium contrast: #6750A4 via md.ref.palette.primary40 High contrast: #4F378B via md.ref.palette.primary30
Hovered	md.comp.fab.primary-container.hovered.state-layer.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#4F378B	Dark: #EADDFF via md.ref.palette.primary90 Medium contrast: #FFFFFF via md.ref.palette.primary100 High contrast: #FFFFFF via md.ref.palette.primary100
Hovered	md.comp.fab.primary-container.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered	md.comp.fab.primary-container.hovered.icon.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#4F378B	Dark: #EADDFF via md.ref.palette.primary90 Medium contrast: #FFFFFF via md.ref.palette.primary100 High contrast: #FFFFFF via md.ref.palette.primary100
Hovered	md.comp.fab.primary-container.hovered.container.elevation	Elevation	md.sys.elevation.level4	8dp	—
Focused	md.comp.fab.primary-container.focused.state-layer.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#4F378B	Dark: #EADDFF via md.ref.palette.primary90 Medium contrast: #FFFFFF via md.ref.palette.primary100 High contrast: #FFFFFF via md.ref.palette.primary100
Focused	md.comp.fab.primary-container.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused	md.comp.fab.primary-container.focused.icon.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#4F378B	Dark: #EADDFF via md.ref.palette.primary90 Medium contrast: #FFFFFF via md.ref.palette.primary100 High contrast: #FFFFFF via md.ref.palette.primary100
Focused	md.comp.fab.primary-container.focused.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Pressed	md.comp.fab.primary-container.pressed.state-layer.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#4F378B	Dark: #EADDFF via md.ref.palette.primary90 Medium contrast: #FFFFFF via md.ref.palette.primary100 High contrast: #FFFFFF via md.ref.palette.primary100
Pressed	md.comp.fab.primary-container.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed	md.comp.fab.primary-container.pressed.icon.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#4F378B	Dark: #EADDFF via md.ref.palette.primary90 Medium contrast: #FFFFFF via md.ref.palette.primary100 High contrast: #FFFFFF via md.ref.palette.primary100
Pressed	md.comp.fab.primary-container.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp	—

FAB - Color - Tonal secondary · md.comp.fab.secondary-container · 16 tokens

For tonal secondary container FABs.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled	md.comp.fab.secondary-container.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Enabled	md.comp.fab.secondary-container.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Enabled	md.comp.fab.secondary-container.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Enabled	md.comp.fab.secondary-container.container.color	Color	md.sys.color.secondary-container → md.ref.palette.secondary90	#E8DEF8	Dark: #4A4458 via md.ref.palette.secondary30 Medium contrast: #625B71 via md.ref.palette.secondary40 High contrast: #4A4458 via md.ref.palette.secondary30
Hovered	md.comp.fab.secondary-container.hovered.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Hovered	md.comp.fab.secondary-container.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered	md.comp.fab.secondary-container.hovered.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Hovered	md.comp.fab.secondary-container.hovered.container.elevation	Elevation	md.sys.elevation.level4	8dp	—
Focused	md.comp.fab.secondary-container.focused.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Focused	md.comp.fab.secondary-container.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused	md.comp.fab.secondary-container.focused.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Focused	md.comp.fab.secondary-container.focused.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Pressed	md.comp.fab.secondary-container.pressed.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Pressed	md.comp.fab.secondary-container.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed	md.comp.fab.secondary-container.pressed.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Pressed	md.comp.fab.secondary-container.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp	—

FAB - Color - Tonal tertiary · md.comp.fab.tertiary-container · 16 tokens

For tonal tertiary container FABs.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled	md.comp.fab.tertiary-container.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Enabled	md.comp.fab.tertiary-container.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Enabled	md.comp.fab.tertiary-container.icon.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Enabled	md.comp.fab.tertiary-container.container.color	Color	md.sys.color.tertiary-container → md.ref.palette.tertiary90	#FFD8E4	Dark: #633B48 via md.ref.palette.tertiary30 Medium contrast: #7D5260 via md.ref.palette.tertiary40 High contrast: #633B48 via md.ref.palette.tertiary30
Hovered	md.comp.fab.tertiary-container.hovered.state-layer.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Hovered	md.comp.fab.tertiary-container.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered	md.comp.fab.tertiary-container.hovered.icon.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Hovered	md.comp.fab.tertiary-container.hovered.container.elevation	Elevation	md.sys.elevation.level4	8dp	—
Focused	md.comp.fab.tertiary-container.focused.state-layer.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Focused	md.comp.fab.tertiary-container.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused	md.comp.fab.tertiary-container.focused.icon.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Focused	md.comp.fab.tertiary-container.focused.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Pressed	md.comp.fab.tertiary-container.pressed.state-layer.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Pressed	md.comp.fab.tertiary-container.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed	md.comp.fab.tertiary-container.pressed.icon.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
Pressed	md.comp.fab.tertiary-container.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp	—

FAB - Color - Primary · md.comp.fab.primary · 35 tokens

For primary color FABs.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled	md.comp.fab.primary.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Enabled	md.comp.fab.primary.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Enabled	md.comp.fab.primary.icon.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Enabled	md.comp.fab.primary.container.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Hovered	md.comp.fab.primary.hovered.state-layer.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Hovered	md.comp.fab.primary.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered	md.comp.fab.primary.hovered.icon.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Hovered	md.comp.fab.primary.hovered.container.elevation	Elevation	md.sys.elevation.level4	8dp	—
Focused	md.comp.fab.primary.focused.state-layer.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Focused	md.comp.fab.primary.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused	md.comp.fab.primary.focused.icon.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Focused	md.comp.fab.primary.focused.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Pressed	md.comp.fab.primary.pressed.state-layer.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Pressed	md.comp.fab.primary.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed	md.comp.fab.primary.pressed.icon.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Pressed	md.comp.fab.primary.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.fab.primary.container.shape (deprecated)	Shape	md.sys.shape.corner.large	Rounded corners 16dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.fab.primary.container.width (deprecated)	Length	—	56dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.fab.primary.container.height (deprecated)	Length	—	56dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.fab.primary.lowered.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp	—
[Deprecated] Enabled › [Deprecated] Icon	md.comp.fab.primary.icon.size (deprecated)	Length	—	24dp	—
[Deprecated] Hovered › [Deprecated] Container	md.comp.fab.primary.hover.container.elevation (deprecated)	Elevation	md.sys.elevation.level4	8dp	—
[Deprecated] Hovered › [Deprecated] Container	md.comp.fab.primary.lowered.hover.container.elevation (deprecated)	Elevation	md.sys.elevation.level2	3dp	—
[Deprecated] Hovered › [Deprecated] State layer	md.comp.fab.primary.hover.state-layer.color (deprecated)	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#4F378B	Dark: #EADDFF via md.ref.palette.primary90 Medium contrast: #FFFFFF via md.ref.palette.primary100 High contrast: #FFFFFF via md.ref.palette.primary100
[Deprecated] Hovered › [Deprecated] State layer	md.comp.fab.primary.hover.state-layer.opacity (deprecated)	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
[Deprecated] Hovered › [Deprecated] Icon	md.comp.fab.primary.hover.icon.color (deprecated)	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#4F378B	Dark: #EADDFF via md.ref.palette.primary90 Medium contrast: #FFFFFF via md.ref.palette.primary100 High contrast: #FFFFFF via md.ref.palette.primary100
[Deprecated] Focused › [Deprecated] Container	md.comp.fab.primary.focus.container.elevation (deprecated)	Elevation	md.sys.elevation.level3	6dp	—
[Deprecated] Focused › [Deprecated] Container	md.comp.fab.primary.lowered.focus.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp	—
[Deprecated] Focused › [Deprecated] State layer	md.comp.fab.primary.focus.state-layer.color (deprecated)	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#4F378B	Dark: #EADDFF via md.ref.palette.primary90 Medium contrast: #FFFFFF via md.ref.palette.primary100 High contrast: #FFFFFF via md.ref.palette.primary100
[Deprecated] Focused › [Deprecated] State layer	md.comp.fab.primary.focus.state-layer.opacity (deprecated)	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
[Deprecated] Focused › [Deprecated] Icon	md.comp.fab.primary.focus.icon.color (deprecated)	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#4F378B	Dark: #EADDFF via md.ref.palette.primary90 Medium contrast: #FFFFFF via md.ref.palette.primary100 High contrast: #FFFFFF via md.ref.palette.primary100
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.fab.primary.focus.indicator.color (deprecated)	Color	md.sys.color.secondary → md.ref.palette.secondary40	#625B71	Dark: #CCC2DC via md.ref.palette.secondary80 Medium contrast: #4A4458 via md.ref.palette.secondary30 High contrast: #332D41 via md.ref.palette.secondary20
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.fab.primary.focus.indicator.thickness (deprecated)	Length	md.sys.state.focus-indicator.thickness	3dp	—
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.fab.primary.focus.indicator.outline.offset (deprecated)	Length	md.sys.state.focus-indicator.outer-offset	2dp	—
[Deprecated] Pressed (ripple) › [Deprecated] Container	md.comp.fab.primary.lowered.pressed.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp	—

FAB - Color - Secondary · md.comp.fab.secondary · 35 tokens

For secondary color FABs.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled	md.comp.fab.secondary.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Enabled	md.comp.fab.secondary.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Enabled	md.comp.fab.secondary.icon.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF	Dark: #332D41 via md.ref.palette.secondary20
Enabled	md.comp.fab.secondary.container.color	Color	md.sys.color.secondary → md.ref.palette.secondary40	#625B71	Dark: #CCC2DC via md.ref.palette.secondary80 Medium contrast: #4A4458 via md.ref.palette.secondary30 High contrast: #332D41 via md.ref.palette.secondary20
Hovered	md.comp.fab.secondary.hovered.state-layer.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF	Dark: #332D41 via md.ref.palette.secondary20
Hovered	md.comp.fab.secondary.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered	md.comp.fab.secondary.hovered.icon.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF	Dark: #332D41 via md.ref.palette.secondary20
Hovered	md.comp.fab.secondary.hovered.container.elevation	Elevation	md.sys.elevation.level4	8dp	—
Focused	md.comp.fab.secondary.focused.state-layer.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF	Dark: #332D41 via md.ref.palette.secondary20
Focused	md.comp.fab.secondary.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused	md.comp.fab.secondary.focused.icon.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF	Dark: #332D41 via md.ref.palette.secondary20
Focused	md.comp.fab.secondary.focused.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Pressed	md.comp.fab.secondary.pressed.state-layer.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF	Dark: #332D41 via md.ref.palette.secondary20
Pressed	md.comp.fab.secondary.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed	md.comp.fab.secondary.pressed.icon.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF	Dark: #332D41 via md.ref.palette.secondary20
Pressed	md.comp.fab.secondary.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.fab.secondary.container.shape (deprecated)	Shape	md.sys.shape.corner.large	Rounded corners 16dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.fab.secondary.container.width (deprecated)	Length	—	56dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.fab.secondary.container.height (deprecated)	Length	—	56dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.fab.secondary.lowered.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp	—
[Deprecated] Enabled › [Deprecated] Icon	md.comp.fab.secondary.icon.size (deprecated)	Length	—	24dp	—
[Deprecated] Hovered › [Deprecated] Container	md.comp.fab.secondary.hover.container.elevation (deprecated)	Elevation	md.sys.elevation.level4	8dp	—
[Deprecated] Hovered › [Deprecated] Container	md.comp.fab.secondary.lowered.hover.container.elevation (deprecated)	Elevation	md.sys.elevation.level2	3dp	—
[Deprecated] Hovered › [Deprecated] State layer	md.comp.fab.secondary.hover.state-layer.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
[Deprecated] Hovered › [Deprecated] State layer	md.comp.fab.secondary.hover.state-layer.opacity (deprecated)	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
[Deprecated] Hovered › [Deprecated] Icon	md.comp.fab.secondary.hover.icon.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
[Deprecated] Focused › [Deprecated] Container	md.comp.fab.secondary.focus.container.elevation (deprecated)	Elevation	md.sys.elevation.level3	6dp	—
[Deprecated] Focused › [Deprecated] Container	md.comp.fab.secondary.lowered.focus.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp	—
[Deprecated] Focused › [Deprecated] State layer	md.comp.fab.secondary.focus.state-layer.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
[Deprecated] Focused › [Deprecated] State layer	md.comp.fab.secondary.focus.state-layer.opacity (deprecated)	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
[Deprecated] Focused › [Deprecated] Icon	md.comp.fab.secondary.focus.icon.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.fab.secondary.focus.indicator.color (deprecated)	Color	md.sys.color.secondary → md.ref.palette.secondary40	#625B71	Dark: #CCC2DC via md.ref.palette.secondary80 Medium contrast: #4A4458 via md.ref.palette.secondary30 High contrast: #332D41 via md.ref.palette.secondary20
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.fab.secondary.focus.indicator.thickness (deprecated)	Length	md.sys.state.focus-indicator.thickness	3dp	—
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.fab.secondary.focus.indicator.outline.offset (deprecated)	Length	md.sys.state.focus-indicator.outer-offset	2dp	—
[Deprecated] Pressed (ripple) › [Deprecated] Container	md.comp.fab.secondary.lowered.pressed.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp	—

FAB - Color - Tertiary · md.comp.fab.tertiary · 35 tokens

For the tertiary style fab.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled	md.comp.fab.tertiary.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Enabled	md.comp.fab.tertiary.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Enabled	md.comp.fab.tertiary.icon.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF	Dark: #492532 via md.ref.palette.tertiary20
Enabled	md.comp.fab.tertiary.container.color	Color	md.sys.color.tertiary → md.ref.palette.tertiary40	#7D5260	Dark: #EFB8C8 via md.ref.palette.tertiary80 Medium contrast: #633B48 via md.ref.palette.tertiary30 High contrast: #492532 via md.ref.palette.tertiary20
Hovered	md.comp.fab.tertiary.hovered.state-layer.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF	Dark: #492532 via md.ref.palette.tertiary20
Hovered	md.comp.fab.tertiary.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered	md.comp.fab.tertiary.hovered.icon.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF	Dark: #492532 via md.ref.palette.tertiary20
Hovered	md.comp.fab.tertiary.hovered.container.elevation	Elevation	md.sys.elevation.level4	8dp	—
Focused	md.comp.fab.tertiary.focused.state-layer.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF	Dark: #492532 via md.ref.palette.tertiary20
Focused	md.comp.fab.tertiary.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused	md.comp.fab.tertiary.focused.icon.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF	Dark: #492532 via md.ref.palette.tertiary20
Focused	md.comp.fab.tertiary.focused.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Pressed	md.comp.fab.tertiary.pressed.state-layer.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF	Dark: #492532 via md.ref.palette.tertiary20
Pressed	md.comp.fab.tertiary.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed	md.comp.fab.tertiary.pressed.icon.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF	Dark: #492532 via md.ref.palette.tertiary20
Pressed	md.comp.fab.tertiary.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.fab.tertiary.lowered.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.fab.tertiary.container.height (deprecated)	Length	—	56dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.fab.tertiary.container.shape (deprecated)	Shape	md.sys.shape.corner.large	Rounded corners 16dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.fab.tertiary.container.width (deprecated)	Length	—	56dp	—
[Deprecated] Enabled › [Deprecated] Icon	md.comp.fab.tertiary.icon.size (deprecated)	Length	—	24dp	—
[Deprecated] Hovered › [Deprecated] Container	md.comp.fab.tertiary.hover.container.elevation (deprecated)	Elevation	md.sys.elevation.level4	8dp	—
[Deprecated] Hovered › [Deprecated] Container	md.comp.fab.tertiary.lowered.hover.container.elevation (deprecated)	Elevation	md.sys.elevation.level2	3dp	—
[Deprecated] Hovered › [Deprecated] State layer	md.comp.fab.tertiary.hover.state-layer.color (deprecated)	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
[Deprecated] Hovered › [Deprecated] State layer	md.comp.fab.tertiary.hover.state-layer.opacity (deprecated)	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
[Deprecated] Hovered › [Deprecated] Icon	md.comp.fab.tertiary.hover.icon.color (deprecated)	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
[Deprecated] Focused › [Deprecated] Container	md.comp.fab.tertiary.focus.container.elevation (deprecated)	Elevation	md.sys.elevation.level3	6dp	—
[Deprecated] Focused › [Deprecated] Container	md.comp.fab.tertiary.lowered.focus.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp	—
[Deprecated] Focused › [Deprecated] State layer	md.comp.fab.tertiary.focus.state-layer.color (deprecated)	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
[Deprecated] Focused › [Deprecated] State layer	md.comp.fab.tertiary.focus.state-layer.opacity (deprecated)	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
[Deprecated] Focused › [Deprecated] Icon	md.comp.fab.tertiary.focus.icon.color (deprecated)	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#633B48	Dark: #FFD8E4 via md.ref.palette.tertiary90 Medium contrast: #FFFFFF via md.ref.palette.tertiary100 High contrast: #FFFFFF via md.ref.palette.tertiary100
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.fab.tertiary.focus.indicator.color (deprecated)	Color	md.sys.color.secondary → md.ref.palette.secondary40	#625B71	Dark: #CCC2DC via md.ref.palette.secondary80 Medium contrast: #4A4458 via md.ref.palette.secondary30 High contrast: #332D41 via md.ref.palette.secondary20
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.fab.tertiary.focus.indicator.thickness (deprecated)	Length	md.sys.state.focus-indicator.thickness	3dp	—
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.fab.tertiary.focus.indicator.outline.offset (deprecated)	Length	md.sys.state.focus-indicator.outer-offset	2dp	—
[Deprecated] Pressed (ripple) › [Deprecated] Container	md.comp.fab.tertiary.lowered.pressed.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp	—

Anatomy

1. Container

2. Icon

Color

Color values are implemented through design tokens. For design, this means working with color values that correspond with tokens. In implementation, a color value will be a token that references a value. Learn more about design tokens

Color styles

FABs can use several combinations of color and on-color styles, such as primary and on-primary. The following color mappings provide the same legibility and functionality, so the color mapping you use depends on style alone.

1. Primary container & On primary container (default)
2. Secondary container & On secondary container
3. Tertiary container & On tertiary container
4. Primary & On primary
5. Secondary & On secondary
6. Tertiary & On tertiary

Baseline color styles

Surface FAB color styles are still available, but no longer recommended.

1. Surface FABs

States

States are visual representations used to communicate the status of a component or interactive element.

When using a non-default color mapping for FABs, make sure the state layer color is the same as the icon color. For example, the state layer color for the primary color style should be md.sys.color.primary.

1. Enabled
2. Hovered (8% state layer) - elevation 4
3. Focused (10% state layer)
4. Pressed (10% state layer)

Measurements

FAB

FAB size measurements

FAB padding measurements

Medium FAB

Medium FAB size measurements

Medium FAB padding measurements

Large FAB

Large FAB size measurements

Large FAB padding measurements

Baseline tokens & specs

Use the table's menu to select a token set. This only includes tokens for small and surface FABs, which are both no longer recommended. It doesn't include other colors, or large or regular FABs, since those are still currently used.

Design tokens

Token table

Machine-readable relationship table

Floating action buttons (FABs) tokens · 1 token set · 29 tokens · live token table · DSDB TOKEN_TABLE.41587918e51cca98

• Default context: Theme: Light · Platform: Android · Audience: 3P · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
• Not configurable here (group default used): Motion scheme: Standard · Font: Static · Language height: Small
• Other contexts: Theme: Dark · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
• Reference chain: aliases from the token to its source value (token → alias → … → value). "—" means the token holds a literal value.
• Token sets requested by the page but missing from the data module: [Deprecated] FAB - Size - Small

FAB - Color - Surface · md.comp.fab.surface · 29 tokens

For surface color FABs. Not recommended with expressive FABs.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled › Container	md.comp.fab.surface.container.color	Color	md.sys.color.surface-container-high → md.ref.palette.neutral92	#ECE6F0	Dark: #2B2930 via md.ref.palette.neutral17
Enabled › Container	md.comp.fab.surface.lowered.container.color	Color	md.sys.color.surface-container-low → md.ref.palette.neutral96	#F7F2FA	Dark: #1D1B20 via md.ref.palette.neutral10
Enabled › Container	md.comp.fab.surface.container.shape	Shape	md.sys.shape.corner.large	Rounded corners 16dp	—
Enabled › Container	md.comp.fab.surface.container.width	Length	—	56dp	—
Enabled › Container	md.comp.fab.surface.container.height	Length	—	56dp	—
Enabled › Container	md.comp.fab.surface.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Enabled › Container	md.comp.fab.surface.container.surface-tint-layer.color (deprecated)	Color	md.sys.color.surface-tint → md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Enabled › Container	md.comp.fab.surface.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Enabled › Container	md.comp.fab.surface.lowered.container.elevation	Elevation	md.sys.elevation.level1	1dp	—
Enabled › Icon	md.comp.fab.surface.icon.size	Length	—	24dp	—
Enabled › Icon	md.comp.fab.surface.icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Hovered › Container	md.comp.fab.surface.hover.container.elevation	Elevation	md.sys.elevation.level4	8dp	—
Hovered › Container	md.comp.fab.surface.lowered.hover.container.elevation	Elevation	md.sys.elevation.level2	3dp	—
Hovered › State layer	md.comp.fab.surface.hover.state-layer.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Hovered › State layer	md.comp.fab.surface.hover.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered › Icon	md.comp.fab.surface.hover.icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Focused › Container	md.comp.fab.surface.focus.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Focused › Container	md.comp.fab.surface.lowered.focus.container.elevation	Elevation	md.sys.elevation.level1	1dp	—
Focused › State layer	md.comp.fab.surface.focus.state-layer.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Focused › State layer	md.comp.fab.surface.focus.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused › Icon	md.comp.fab.surface.focus.icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Focused › Focus indicator	md.comp.fab.surface.focus.indicator.color	Color	md.sys.color.secondary → md.ref.palette.secondary40	#625B71	Dark: #CCC2DC via md.ref.palette.secondary80 Medium contrast: #4A4458 via md.ref.palette.secondary30 High contrast: #332D41 via md.ref.palette.secondary20
Focused › Focus indicator	md.comp.fab.surface.focus.indicator.thickness	Length	md.sys.state.focus-indicator.thickness	3dp	—
Focused › Focus indicator	md.comp.fab.surface.focus.indicator.outline.offset	Length	md.sys.state.focus-indicator.outer-offset	2dp	—
Pressed (ripple) › Container	md.comp.fab.surface.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Pressed (ripple) › Container	md.comp.fab.surface.lowered.pressed.container.elevation	Elevation	md.sys.elevation.level1	1dp	—
Pressed (ripple) › State layer	md.comp.fab.surface.pressed.state-layer.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Pressed (ripple) › State layer	md.comp.fab.surface.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed (ripple) › Icon	md.comp.fab.surface.pressed.icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20