Extended FABs

Extended floating action buttons (extended FABs) help people take primary actions, just like FABs. They’re wider than FABs and include a text label, providing more detail and a larger target surface.

Overview · Specs · Guidelines · Accessibility

Variants

1. Small extended FAB
2. Medium extended FAB
3. Large extended FAB

Baseline variants

The baseline extended FAB is no longer recommended in the M3 expressive update. Use a small extended FAB; the type style was updated from label large to title medium, and the inner padding was reduced. View baseline extended FAB specs

1. Extended FAB

Variant	M3	M3 Expressive
Small extended FAB	--	Available
Medium extended FAB	--	Available
Large extended FAB	--	Available
Extended FAB (baseline)	Available	Not recommended. Use small extended FAB.

Tokens & specs

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

Design tokens

Token table

Machine-readable relationship table

Extended FAB tokens · 9 token sets · 219 tokens · live token table · DSDB TOKEN_TABLE.36500f77b86d20a5

• 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.

Extended FAB - Size - Small · md.comp.extended-fab.small · 7 tokens

For expressive small extended FABs.

Group	Token	Type	Reference chain	Resolved value	Other contexts
All tokens	md.comp.extended-fab.small.container.height	Length	—	56dp	—
All tokens	md.comp.extended-fab.small.label-text	Typography	md.sys.typescale.title-medium → composite font names: md.sys.typescale.title-medium.font → md.ref.typeface.plain font weight: md.sys.typescale.title-medium.weight → md.ref.typeface.weight-medium font size: md.sys.typescale.title-medium.size line height: md.sys.typescale.title-medium.line-height font tracking: md.sys.typescale.title-medium.tracking	Roboto · weight 500 · size 16pt · line height 24pt · tracking 0.15pt	—
All tokens	md.comp.extended-fab.small.icon.size	Length	—	24dp	—
All tokens	md.comp.extended-fab.small.container.shape	Shape	md.sys.shape.corner.large	Rounded corners 16dp	—
All tokens	md.comp.extended-fab.small.leading-space	Length	md.sys.measurement.space200	16dp	—
All tokens	md.comp.extended-fab.small.icon-label-space	Length	md.sys.measurement.space100	8dp	—
All tokens	md.comp.extended-fab.small.trailing-space	Length	md.sys.measurement.space200	16dp	—

Extended FAB - Size - Medium · md.comp.extended-fab.medium · 7 tokens

For medium extended FABs.

Group	Token	Type	Reference chain	Resolved value	Other contexts
All tokens	md.comp.extended-fab.medium.container.height	Length	—	80dp	—
All tokens	md.comp.extended-fab.medium.label-text	Typography	md.sys.typescale.title-large → composite font names: md.sys.typescale.title-large.font → md.ref.typeface.brand font weight: md.sys.typescale.title-large.weight → md.ref.typeface.weight-regular font size: md.sys.typescale.title-large.size line height: md.sys.typescale.title-large.line-height font tracking: md.sys.typescale.title-large.tracking	Roboto · weight 400 · size 22pt · line height 28pt · tracking 0pt	—
All tokens	md.comp.extended-fab.medium.icon.size	Length	—	28dp	—
All tokens	md.comp.extended-fab.medium.container.shape	Shape	md.sys.shape.corner.large-increased	Rounded corners 20dp	—
All tokens	md.comp.extended-fab.medium.leading-space	Length	—	26dp	—
All tokens	md.comp.extended-fab.medium.icon-label-space	Length	md.sys.measurement.space150	12dp	—
All tokens	md.comp.extended-fab.medium.trailing-space	Length	—	26dp	—

Extended FAB - Size - Large · md.comp.extended-fab.large · 7 tokens

For large extended FABs.

Group	Token	Type	Reference chain	Resolved value	Other contexts
All tokens	md.comp.extended-fab.large.container.height	Length	—	96dp	—
All tokens	md.comp.extended-fab.large.label-text	Typography	md.sys.typescale.headline-small → composite font names: md.sys.typescale.headline-small.font → md.ref.typeface.brand font weight: md.sys.typescale.headline-small.weight → md.ref.typeface.weight-regular font size: md.sys.typescale.headline-small.size line height: md.sys.typescale.headline-small.line-height font tracking: md.sys.typescale.headline-small.tracking	Roboto · weight 400 · size 24pt · line height 32pt · tracking 0pt	—
All tokens	md.comp.extended-fab.large.icon.size	Length	—	36dp	—
All tokens	md.comp.extended-fab.large.container.shape	Shape	md.sys.shape.corner.extra-large	Rounded corners 28dp	—
All tokens	md.comp.extended-fab.large.leading-space	Length	—	28dp	—
All tokens	md.comp.extended-fab.large.icon-label-space	Length	md.sys.measurement.space200	16dp	—
All tokens	md.comp.extended-fab.large.trailing-space	Length	—	28dp	—

Extended FAB - Color - Tonal primary · md.comp.extended-fab.primary-container · 20 tokens

For tonal primary container extended FABs.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled	md.comp.extended-fab.primary-container.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Enabled	md.comp.extended-fab.primary-container.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Enabled	md.comp.extended-fab.primary-container.label-text.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.extended-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.extended-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.extended-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.extended-fab.primary-container.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered	md.comp.extended-fab.primary-container.hovered.label-text.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.extended-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.extended-fab.primary-container.hovered.container.elevation	Elevation	md.sys.elevation.level4	8dp	—
Focused	md.comp.extended-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.extended-fab.primary-container.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused	md.comp.extended-fab.primary-container.focused.label-text.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.extended-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.extended-fab.primary-container.focused.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Pressed	md.comp.extended-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.extended-fab.primary-container.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed	md.comp.extended-fab.primary-container.pressed.label-text.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.extended-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.extended-fab.primary-container.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp	—

Extended FAB - Color - Tonal secondary · md.comp.extended-fab.secondary-container · 20 tokens

For tonal secondary container extended FABs.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled	md.comp.extended-fab.secondary-container.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Enabled	md.comp.extended-fab.secondary-container.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Enabled	md.comp.extended-fab.secondary-container.label-text.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.extended-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.extended-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.extended-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.extended-fab.secondary-container.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered	md.comp.extended-fab.secondary-container.hovered.label-text.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.extended-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.extended-fab.secondary-container.hovered.container.elevation	Elevation	md.sys.elevation.level4	8dp	—
Focused	md.comp.extended-fab.secondary-container.focused.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Focused	md.comp.extended-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.extended-fab.secondary-container.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused	md.comp.extended-fab.secondary-container.focused.label-text.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.extended-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
Pressed	md.comp.extended-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.extended-fab.secondary-container.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed	md.comp.extended-fab.secondary-container.pressed.label-text.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.extended-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.extended-fab.secondary-container.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp	—

Extended FAB - Color - Tonal tertiary · md.comp.extended-fab.tertiary-container · 20 tokens

For tonal tertiary container extended FABs.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled	md.comp.extended-fab.tertiary-container.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Enabled	md.comp.extended-fab.tertiary-container.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Enabled	md.comp.extended-fab.tertiary-container.label-text.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.extended-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.extended-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.extended-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.extended-fab.tertiary-container.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered	md.comp.extended-fab.tertiary-container.hovered.label-text.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.extended-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.extended-fab.tertiary-container.hovered.container.elevation	Elevation	md.sys.elevation.level4	8dp	—
Focused	md.comp.extended-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.extended-fab.tertiary-container.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused	md.comp.extended-fab.tertiary-container.focused.label-text.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.extended-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.extended-fab.tertiary-container.focused.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Pressed	md.comp.extended-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.extended-fab.tertiary-container.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed	md.comp.extended-fab.tertiary-container.pressed.label-text.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.extended-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.extended-fab.tertiary-container.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp	—

Extended FAB - Color - Primary · md.comp.extended-fab.primary · 46 tokens

For primary color extended FABs.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled	md.comp.extended-fab.primary.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Enabled	md.comp.extended-fab.primary.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Enabled	md.comp.extended-fab.primary.label-text.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Enabled	md.comp.extended-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.extended-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.extended-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.extended-fab.primary.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered	md.comp.extended-fab.primary.hovered.label-text.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Hovered	md.comp.extended-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.extended-fab.primary.hovered.container.elevation	Elevation	md.sys.elevation.level4	8dp	—
Focused	md.comp.extended-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.extended-fab.primary.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused	md.comp.extended-fab.primary.focused.label-text.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Focused	md.comp.extended-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.extended-fab.primary.focused.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Pressed	md.comp.extended-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.extended-fab.primary.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed	md.comp.extended-fab.primary.pressed.label-text.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF	Dark: #381E72 via md.ref.palette.primary20
Pressed	md.comp.extended-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.extended-fab.primary.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.extended-fab.primary.container.shape (deprecated)	Shape	md.sys.shape.corner.large	Rounded corners 16dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.extended-fab.primary.container.height (deprecated)	Length	—	56dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.extended-fab.primary.lowered.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp	—
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.primary.label-text.font (deprecated)	Font names	md.sys.typescale.label-large.font → md.ref.typeface.plain	Roboto	—
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.primary.label-text.line-height (deprecated)	Line height	md.sys.typescale.label-large.line-height	20pt	—
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.primary.label-text.size (deprecated)	Font size	md.sys.typescale.label-large.size	14pt	—
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.primary.label-text.weight (deprecated)	Font weight	md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium	500	—
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.primary.label-text.tracking (deprecated)	Font tracking	md.sys.typescale.label-large.tracking	0.1pt	—
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.primary.label-text.type (deprecated)	Typography	composite font names: md.comp.extended-fab.primary.label-text.font → md.sys.typescale.label-large.font → md.ref.typeface.plain font weight: md.comp.extended-fab.primary.label-text.weight → md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium font size: md.comp.extended-fab.primary.label-text.size → md.sys.typescale.label-large.size line height: md.comp.extended-fab.primary.label-text.line-height → md.sys.typescale.label-large.line-height font tracking: md.comp.extended-fab.primary.label-text.tracking → md.sys.typescale.label-large.tracking	Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt	—
[Deprecated] Enabled › [Deprecated] Icon	md.comp.extended-fab.primary.icon.size (deprecated)	Length	—	24dp	—
[Deprecated] Hovered › [Deprecated] Container	md.comp.extended-fab.primary.hover.container.elevation (deprecated)	Elevation	md.sys.elevation.level4	8dp	—
[Deprecated] Hovered › [Deprecated] Container	md.comp.extended-fab.primary.lowered.hover.container.elevation (deprecated)	Elevation	md.sys.elevation.level2	3dp	—
[Deprecated] Hovered › [Deprecated] Label text	md.comp.extended-fab.primary.hover.label-text.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.extended-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.extended-fab.primary.hover.state-layer.opacity (deprecated)	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
[Deprecated] Hovered › [Deprecated] Icon	md.comp.extended-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.extended-fab.primary.focus.container.elevation (deprecated)	Elevation	md.sys.elevation.level3	6dp	—
[Deprecated] Focused › [Deprecated] Container	md.comp.extended-fab.primary.lowered.focus.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp	—
[Deprecated] Focused › [Deprecated] Label text	md.comp.extended-fab.primary.focus.label-text.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.extended-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.extended-fab.primary.focus.state-layer.opacity (deprecated)	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
[Deprecated] Focused › [Deprecated] Icon	md.comp.extended-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.extended-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.extended-fab.primary.focus.indicator.thickness (deprecated)	Length	md.sys.state.focus-indicator.thickness	3dp	—
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.extended-fab.primary.focus.indicator.outline.offset (deprecated)	Length	md.sys.state.focus-indicator.outer-offset	2dp	—
[Deprecated] Pressed (ripple) › [Deprecated] Container	md.comp.extended-fab.primary.lowered.pressed.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp	—

Extended FAB - Color - Secondary · md.comp.extended-fab.secondary · 46 tokens

For secondary color extended FABs.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled	md.comp.extended-fab.secondary.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Enabled	md.comp.extended-fab.secondary.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Enabled	md.comp.extended-fab.secondary.label-text.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF	Dark: #332D41 via md.ref.palette.secondary20
Enabled	md.comp.extended-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.extended-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.extended-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.extended-fab.secondary.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered	md.comp.extended-fab.secondary.hovered.label-text.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF	Dark: #332D41 via md.ref.palette.secondary20
Hovered	md.comp.extended-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.extended-fab.secondary.hovered.container.elevation	Elevation	md.sys.elevation.level4	8dp	—
Focused	md.comp.extended-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.extended-fab.secondary.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused	md.comp.extended-fab.secondary.focused.label-text.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF	Dark: #332D41 via md.ref.palette.secondary20
Focused	md.comp.extended-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.extended-fab.secondary.focused.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Pressed	md.comp.extended-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.extended-fab.secondary.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed	md.comp.extended-fab.secondary.pressed.label-text.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF	Dark: #332D41 via md.ref.palette.secondary20
Pressed	md.comp.extended-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.extended-fab.secondary.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.extended-fab.secondary.container.shape (deprecated)	Shape	md.sys.shape.corner.large	Rounded corners 16dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.extended-fab.secondary.container.height (deprecated)	Length	—	56dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.extended-fab.secondary.lowered.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp	—
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.secondary.label-text.font (deprecated)	Font names	md.sys.typescale.label-large.font → md.ref.typeface.plain	Roboto	—
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.secondary.label-text.line-height (deprecated)	Line height	md.sys.typescale.label-large.line-height	20pt	—
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.secondary.label-text.size (deprecated)	Font size	md.sys.typescale.label-large.size	14pt	—
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.secondary.label-text.weight (deprecated)	Font weight	md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium	500	—
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.secondary.label-text.tracking (deprecated)	Font tracking	md.sys.typescale.label-large.tracking	0.1pt	—
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.secondary.label-text.type (deprecated)	Typography	composite font names: md.comp.extended-fab.secondary.label-text.font → md.sys.typescale.label-large.font → md.ref.typeface.plain font weight: md.comp.extended-fab.secondary.label-text.weight → md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium font size: md.comp.extended-fab.secondary.label-text.size → md.sys.typescale.label-large.size line height: md.comp.extended-fab.secondary.label-text.line-height → md.sys.typescale.label-large.line-height font tracking: md.comp.extended-fab.secondary.label-text.tracking → md.sys.typescale.label-large.tracking	Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt	—
[Deprecated] Enabled › [Deprecated] Icon	md.comp.extended-fab.secondary.icon.size (deprecated)	Length	—	24dp	—
[Deprecated] Hovered › [Deprecated] Container	md.comp.extended-fab.secondary.hover.container.elevation (deprecated)	Elevation	md.sys.elevation.level4	8dp	—
[Deprecated] Hovered › [Deprecated] Container	md.comp.extended-fab.secondary.lowered.hover.container.elevation (deprecated)	Elevation	md.sys.elevation.level2	3dp	—
[Deprecated] Hovered › [Deprecated] Label text	md.comp.extended-fab.secondary.hover.label-text.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.extended-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.extended-fab.secondary.hover.state-layer.opacity (deprecated)	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
[Deprecated] Hovered › [Deprecated] Icon	md.comp.extended-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.extended-fab.secondary.focus.container.elevation (deprecated)	Elevation	md.sys.elevation.level3	6dp	—
[Deprecated] Focused › [Deprecated] Container	md.comp.extended-fab.secondary.lowered.focus.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp	—
[Deprecated] Focused › [Deprecated] Label text	md.comp.extended-fab.secondary.focus.label-text.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.extended-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.extended-fab.secondary.focus.state-layer.opacity (deprecated)	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
[Deprecated] Focused › [Deprecated] Icon	md.comp.extended-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.extended-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.extended-fab.secondary.focus.indicator.thickness (deprecated)	Length	md.sys.state.focus-indicator.thickness	3dp	—
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.extended-fab.secondary.focus.indicator.outline.offset (deprecated)	Length	md.sys.state.focus-indicator.outer-offset	2dp	—
[Deprecated] Pressed (ripple) › [Deprecated] Container	md.comp.extended-fab.secondary.lowered.pressed.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp	—

Extended FAB - Color - Tertiary · md.comp.extended-fab.tertiary · 46 tokens

For tertiary color extended FABs.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled	md.comp.extended-fab.tertiary.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Enabled	md.comp.extended-fab.tertiary.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Enabled	md.comp.extended-fab.tertiary.label-text.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF	Dark: #492532 via md.ref.palette.tertiary20
Enabled	md.comp.extended-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.extended-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.extended-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.extended-fab.tertiary.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered	md.comp.extended-fab.tertiary.hovered.label-text.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF	Dark: #492532 via md.ref.palette.tertiary20
Hovered	md.comp.extended-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.extended-fab.tertiary.hovered.container.elevation	Elevation	md.sys.elevation.level4	8dp	—
Focused	md.comp.extended-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.extended-fab.tertiary.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused	md.comp.extended-fab.tertiary.focused.label-text.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF	Dark: #492532 via md.ref.palette.tertiary20
Focused	md.comp.extended-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.extended-fab.tertiary.focused.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Pressed	md.comp.extended-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.extended-fab.tertiary.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed	md.comp.extended-fab.tertiary.pressed.label-text.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF	Dark: #492532 via md.ref.palette.tertiary20
Pressed	md.comp.extended-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.extended-fab.tertiary.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.extended-fab.tertiary.lowered.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.extended-fab.tertiary.container.height (deprecated)	Length	—	56dp	—
[Deprecated] Enabled › [Deprecated] Container	md.comp.extended-fab.tertiary.container.shape (deprecated)	Shape	md.sys.shape.corner.large	Rounded corners 16dp	—
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.tertiary.label-text.font (deprecated)	Font names	md.sys.typescale.label-large.font → md.ref.typeface.plain	Roboto	—
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.tertiary.label-text.line-height (deprecated)	Line height	md.sys.typescale.label-large.line-height	20pt	—
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.tertiary.label-text.size (deprecated)	Font size	md.sys.typescale.label-large.size	14pt	—
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.tertiary.label-text.tracking (deprecated)	Font tracking	md.sys.typescale.label-large.tracking	0.1pt	—
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.tertiary.label-text.weight (deprecated)	Font weight	md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium	500	—
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.tertiary.label-text.type (deprecated)	Typography	composite font names: md.comp.extended-fab.tertiary.label-text.font → md.sys.typescale.label-large.font → md.ref.typeface.plain font weight: md.comp.extended-fab.tertiary.label-text.weight → md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium font size: md.comp.extended-fab.tertiary.label-text.size → md.sys.typescale.label-large.size line height: md.comp.extended-fab.tertiary.label-text.line-height → md.sys.typescale.label-large.line-height font tracking: md.comp.extended-fab.tertiary.label-text.tracking → md.sys.typescale.label-large.tracking	Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt	—
[Deprecated] Enabled › [Deprecated] Icon	md.comp.extended-fab.tertiary.icon.size (deprecated)	Length	—	24dp	—
[Deprecated] Hovered › [Deprecated] Container	md.comp.extended-fab.tertiary.hover.container.elevation (deprecated)	Elevation	md.sys.elevation.level4	8dp	—
[Deprecated] Hovered › [Deprecated] Container	md.comp.extended-fab.tertiary.lowered.hover.container.elevation (deprecated)	Elevation	md.sys.elevation.level2	3dp	—
[Deprecated] Hovered › [Deprecated] Label text	md.comp.extended-fab.tertiary.hover.label-text.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.extended-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.extended-fab.tertiary.hover.state-layer.opacity (deprecated)	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
[Deprecated] Hovered › [Deprecated] Icon	md.comp.extended-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.extended-fab.tertiary.focus.container.elevation (deprecated)	Elevation	md.sys.elevation.level3	6dp	—
[Deprecated] Focused › [Deprecated] Container	md.comp.extended-fab.tertiary.lowered.focus.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp	—
[Deprecated] Focused › [Deprecated] Label text	md.comp.extended-fab.tertiary.focus.label-text.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.extended-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.extended-fab.tertiary.focus.state-layer.opacity (deprecated)	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
[Deprecated] Focused › [Deprecated] Icon	md.comp.extended-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.extended-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.extended-fab.tertiary.focus.indicator.thickness (deprecated)	Length	md.sys.state.focus-indicator.thickness	3dp	—
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.extended-fab.tertiary.focus.indicator.outline.offset (deprecated)	Length	md.sys.state.focus-indicator.outer-offset	2dp	—
[Deprecated] Pressed (ripple) › [Deprecated] Container	md.comp.extended-fab.tertiary.lowered.pressed.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp	—

Anatomy

1. Container
2. Label text
3. Icon

Color

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

Color styles

Extended FABs can use several combinations of color and on color styles, such as primary and on primary. The following color mappings provide the same level of contrast and functionality, so choose a color mapping based on visual preference.

Extended FAB color roles used for light and dark schemes:

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

Extended FABs should no longer use surface color styles. They’re still available, but not recommended.

1. Surface container FAB

States

States are visual representations used to communicate the status of a component or interactive element. Learn more about interaction states

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

1. Enabled 
2. Hovered - elevation 4
3. Focused 
4. Pressed

Measurements

Size and padding measurements of the small, medium, and large extended FABs

Extended FABs should have margins of 16dp

Baseline extended FAB

1. Container
2. Label text
3. Icon

Baseline configurations

With icon

Without icon

Baseline tokens

Use the table's menu to select a token set. The baseline extended FAB token sets are organized by common tokens, then by surface and branded color styles. Other color styles like primary, secondary, and tertiary are still used by the latest extended FABs.

Design tokens

Token table

Machine-readable relationship table

Extended FAB tokens · 12 token sets · 298 tokens · live token table · DSDB TOKEN_TABLE.36500f77b86d20a5

• Default context: none
• Not configurable here (group default used): Theme: Light · Platform: Android · Audience: 1P Baseline · Motion scheme: Standard · Font: Static · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default · Language height: Small
• Reference chain: aliases from the token to its source value (token → alias → … → value). "—" means the token holds a literal value.

Extended FAB - Color - Tonal primary · md.comp.extended-fab.primary-container · 20 tokens

For tonal primary container extended FABs.

Group	Token	Type	Reference chain	Resolved value
Enabled	md.comp.extended-fab.primary-container.container.elevation	Elevation	md.sys.elevation.level3	6dp
Enabled	md.comp.extended-fab.primary-container.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000
Enabled	md.comp.extended-fab.primary-container.label-text.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#0842A0
Enabled	md.comp.extended-fab.primary-container.icon.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#0842A0
Enabled	md.comp.extended-fab.primary-container.container.color	Color	md.sys.color.primary-container → md.ref.palette.primary90	#D3E3FD
Hovered	md.comp.extended-fab.primary-container.hovered.state-layer.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#0842A0
Hovered	md.comp.extended-fab.primary-container.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08
Hovered	md.comp.extended-fab.primary-container.hovered.label-text.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#0842A0
Hovered	md.comp.extended-fab.primary-container.hovered.icon.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#0842A0
Hovered	md.comp.extended-fab.primary-container.hovered.container.elevation	Elevation	md.sys.elevation.level4	8dp
Focused	md.comp.extended-fab.primary-container.focused.state-layer.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#0842A0
Focused	md.comp.extended-fab.primary-container.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1
Focused	md.comp.extended-fab.primary-container.focused.label-text.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#0842A0
Focused	md.comp.extended-fab.primary-container.focused.icon.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#0842A0
Focused	md.comp.extended-fab.primary-container.focused.container.elevation	Elevation	md.sys.elevation.level3	6dp
Pressed	md.comp.extended-fab.primary-container.pressed.state-layer.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#0842A0
Pressed	md.comp.extended-fab.primary-container.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1
Pressed	md.comp.extended-fab.primary-container.pressed.label-text.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#0842A0
Pressed	md.comp.extended-fab.primary-container.pressed.icon.color	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#0842A0
Pressed	md.comp.extended-fab.primary-container.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp

Extended FAB - Color - Primary · md.comp.extended-fab.primary · 46 tokens

For primary color extended FABs.

Group	Token	Type	Reference chain	Resolved value
Enabled	md.comp.extended-fab.primary.container.elevation	Elevation	md.sys.elevation.level3	6dp
Enabled	md.comp.extended-fab.primary.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000
Enabled	md.comp.extended-fab.primary.label-text.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF
Enabled	md.comp.extended-fab.primary.icon.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF
Enabled	md.comp.extended-fab.primary.container.color	Color	md.sys.color.primary → md.ref.palette.primary40	#0B57D0
Hovered	md.comp.extended-fab.primary.hovered.state-layer.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF
Hovered	md.comp.extended-fab.primary.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08
Hovered	md.comp.extended-fab.primary.hovered.label-text.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF
Hovered	md.comp.extended-fab.primary.hovered.icon.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF
Hovered	md.comp.extended-fab.primary.hovered.container.elevation	Elevation	md.sys.elevation.level4	8dp
Focused	md.comp.extended-fab.primary.focused.state-layer.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF
Focused	md.comp.extended-fab.primary.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1
Focused	md.comp.extended-fab.primary.focused.label-text.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF
Focused	md.comp.extended-fab.primary.focused.icon.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF
Focused	md.comp.extended-fab.primary.focused.container.elevation	Elevation	md.sys.elevation.level3	6dp
Pressed	md.comp.extended-fab.primary.pressed.state-layer.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF
Pressed	md.comp.extended-fab.primary.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1
Pressed	md.comp.extended-fab.primary.pressed.label-text.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF
Pressed	md.comp.extended-fab.primary.pressed.icon.color	Color	md.sys.color.on-primary → md.ref.palette.primary100	#FFFFFF
Pressed	md.comp.extended-fab.primary.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp
[Deprecated] Enabled › [Deprecated] Container	md.comp.extended-fab.primary.container.shape (deprecated)	Shape	md.sys.shape.corner.large	Rounded corners 16dp
[Deprecated] Enabled › [Deprecated] Container	md.comp.extended-fab.primary.container.height (deprecated)	Length	—	56dp
[Deprecated] Enabled › [Deprecated] Container	md.comp.extended-fab.primary.lowered.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.primary.label-text.font (deprecated)	Font names	md.sys.typescale.label-large.font → md.ref.typeface.plain	Google Sans Text
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.primary.label-text.line-height (deprecated)	Line height	md.sys.typescale.label-large.line-height	20pt
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.primary.label-text.size (deprecated)	Font size	md.sys.typescale.label-large.size	14pt
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.primary.label-text.weight (deprecated)	Font weight	md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium	500
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.primary.label-text.tracking (deprecated)	Font tracking	md.sys.typescale.label-large.tracking	0pt
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.primary.label-text.type (deprecated)	Typography	composite font names: md.comp.extended-fab.primary.label-text.font → md.sys.typescale.label-large.font → md.ref.typeface.plain font weight: md.comp.extended-fab.primary.label-text.weight → md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium font size: md.comp.extended-fab.primary.label-text.size → md.sys.typescale.label-large.size line height: md.comp.extended-fab.primary.label-text.line-height → md.sys.typescale.label-large.line-height font tracking: md.comp.extended-fab.primary.label-text.tracking → md.sys.typescale.label-large.tracking	Google Sans Text · weight 500 · size 14pt · line height 20pt · tracking 0pt
[Deprecated] Enabled › [Deprecated] Icon	md.comp.extended-fab.primary.icon.size (deprecated)	Length	—	24dp
[Deprecated] Hovered › [Deprecated] Container	md.comp.extended-fab.primary.hover.container.elevation (deprecated)	Elevation	md.sys.elevation.level4	8dp
[Deprecated] Hovered › [Deprecated] Container	md.comp.extended-fab.primary.lowered.hover.container.elevation (deprecated)	Elevation	md.sys.elevation.level2	3dp
[Deprecated] Hovered › [Deprecated] Label text	md.comp.extended-fab.primary.hover.label-text.color (deprecated)	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#0842A0
[Deprecated] Hovered › [Deprecated] State layer	md.comp.extended-fab.primary.hover.state-layer.color (deprecated)	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#0842A0
[Deprecated] Hovered › [Deprecated] State layer	md.comp.extended-fab.primary.hover.state-layer.opacity (deprecated)	Opacity	md.sys.state.hover.state-layer-opacity	0.08
[Deprecated] Hovered › [Deprecated] Icon	md.comp.extended-fab.primary.hover.icon.color (deprecated)	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#0842A0
[Deprecated] Focused › [Deprecated] Container	md.comp.extended-fab.primary.focus.container.elevation (deprecated)	Elevation	md.sys.elevation.level3	6dp
[Deprecated] Focused › [Deprecated] Container	md.comp.extended-fab.primary.lowered.focus.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp
[Deprecated] Focused › [Deprecated] Label text	md.comp.extended-fab.primary.focus.label-text.color (deprecated)	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#0842A0
[Deprecated] Focused › [Deprecated] State layer	md.comp.extended-fab.primary.focus.state-layer.color (deprecated)	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#0842A0
[Deprecated] Focused › [Deprecated] State layer	md.comp.extended-fab.primary.focus.state-layer.opacity (deprecated)	Opacity	md.sys.state.focus.state-layer-opacity	0.1
[Deprecated] Focused › [Deprecated] Icon	md.comp.extended-fab.primary.focus.icon.color (deprecated)	Color	md.sys.color.on-primary-container → md.ref.palette.primary30	#0842A0
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.extended-fab.primary.focus.indicator.color (deprecated)	Color	md.sys.color.secondary → md.ref.palette.secondary40	#00639B
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.extended-fab.primary.focus.indicator.thickness (deprecated)	Length	md.sys.state.focus-indicator.thickness	3dp
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.extended-fab.primary.focus.indicator.outline.offset (deprecated)	Length	md.sys.state.focus-indicator.outer-offset	2dp
[Deprecated] Pressed (ripple) › [Deprecated] Container	md.comp.extended-fab.primary.lowered.pressed.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp

Extended FAB - Size - Large · md.comp.extended-fab.large · 7 tokens

For large extended FABs.

Group	Token	Type	Reference chain	Resolved value
All tokens	md.comp.extended-fab.large.container.height	Length	—	96dp
All tokens	md.comp.extended-fab.large.label-text	Typography	md.sys.typescale.headline-small → composite font names: md.sys.typescale.headline-small.font → md.ref.typeface.brand font weight: md.sys.typescale.headline-small.weight → md.ref.typeface.weight-regular font size: md.sys.typescale.headline-small.size line height: md.sys.typescale.headline-small.line-height font tracking: md.sys.typescale.headline-small.tracking	Google Sans · weight 400 · size 24pt · line height 32pt · tracking 0pt
All tokens	md.comp.extended-fab.large.icon.size	Length	—	36dp
All tokens	md.comp.extended-fab.large.container.shape	Shape	md.sys.shape.corner.extra-large	Rounded corners 28dp
All tokens	md.comp.extended-fab.large.leading-space	Length	—	28dp
All tokens	md.comp.extended-fab.large.icon-label-space	Length	md.sys.measurement.space200	16dp
All tokens	md.comp.extended-fab.large.trailing-space	Length	—	28dp

Extended FAB - Size - Medium · md.comp.extended-fab.medium · 7 tokens

For medium extended FABs.

Group	Token	Type	Reference chain	Resolved value
All tokens	md.comp.extended-fab.medium.container.height	Length	—	80dp
All tokens	md.comp.extended-fab.medium.label-text	Typography	md.sys.typescale.title-large → composite font names: md.sys.typescale.title-large.font → md.ref.typeface.brand font weight: md.sys.typescale.title-large.weight → md.ref.typeface.weight-regular font size: md.sys.typescale.title-large.size line height: md.sys.typescale.title-large.line-height font tracking: md.sys.typescale.title-large.tracking	Google Sans · weight 400 · size 22pt · line height 28pt · tracking 0pt
All tokens	md.comp.extended-fab.medium.icon.size	Length	—	28dp
All tokens	md.comp.extended-fab.medium.container.shape	Shape	md.sys.shape.corner.large-increased	Rounded corners 20dp
All tokens	md.comp.extended-fab.medium.leading-space	Length	—	26dp
All tokens	md.comp.extended-fab.medium.icon-label-space	Length	md.sys.measurement.space150	12dp
All tokens	md.comp.extended-fab.medium.trailing-space	Length	—	26dp

Extended FAB - Color - Tonal secondary · md.comp.extended-fab.secondary-container · 20 tokens

For tonal secondary container extended FABs.

Group	Token	Type	Reference chain	Resolved value
Enabled	md.comp.extended-fab.secondary-container.container.elevation	Elevation	md.sys.elevation.level3	6dp
Enabled	md.comp.extended-fab.secondary-container.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000
Enabled	md.comp.extended-fab.secondary-container.label-text.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#004A77
Enabled	md.comp.extended-fab.secondary-container.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#004A77
Enabled	md.comp.extended-fab.secondary-container.container.color	Color	md.sys.color.secondary-container → md.ref.palette.secondary90	#C2E7FF
Hovered	md.comp.extended-fab.secondary-container.hovered.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#004A77
Hovered	md.comp.extended-fab.secondary-container.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08
Hovered	md.comp.extended-fab.secondary-container.hovered.label-text.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#004A77
Hovered	md.comp.extended-fab.secondary-container.hovered.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#004A77
Hovered	md.comp.extended-fab.secondary-container.hovered.container.elevation	Elevation	md.sys.elevation.level4	8dp
Focused	md.comp.extended-fab.secondary-container.focused.container.elevation	Elevation	md.sys.elevation.level3	6dp
Focused	md.comp.extended-fab.secondary-container.focused.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#004A77
Focused	md.comp.extended-fab.secondary-container.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1
Focused	md.comp.extended-fab.secondary-container.focused.label-text.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#004A77
Focused	md.comp.extended-fab.secondary-container.focused.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#004A77
Pressed	md.comp.extended-fab.secondary-container.pressed.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#004A77
Pressed	md.comp.extended-fab.secondary-container.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1
Pressed	md.comp.extended-fab.secondary-container.pressed.label-text.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#004A77
Pressed	md.comp.extended-fab.secondary-container.pressed.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#004A77
Pressed	md.comp.extended-fab.secondary-container.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp

Extended FAB - Color - Tonal tertiary · md.comp.extended-fab.tertiary-container · 20 tokens

For tonal tertiary container extended FABs.

Group	Token	Type	Reference chain	Resolved value
Enabled	md.comp.extended-fab.tertiary-container.container.elevation	Elevation	md.sys.elevation.level3	6dp
Enabled	md.comp.extended-fab.tertiary-container.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000
Enabled	md.comp.extended-fab.tertiary-container.label-text.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#0F5223
Enabled	md.comp.extended-fab.tertiary-container.icon.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#0F5223
Enabled	md.comp.extended-fab.tertiary-container.container.color	Color	md.sys.color.tertiary-container → md.ref.palette.tertiary90	#C4EED0
Hovered	md.comp.extended-fab.tertiary-container.hovered.state-layer.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#0F5223
Hovered	md.comp.extended-fab.tertiary-container.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08
Hovered	md.comp.extended-fab.tertiary-container.hovered.label-text.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#0F5223
Hovered	md.comp.extended-fab.tertiary-container.hovered.icon.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#0F5223
Hovered	md.comp.extended-fab.tertiary-container.hovered.container.elevation	Elevation	md.sys.elevation.level4	8dp
Focused	md.comp.extended-fab.tertiary-container.focused.state-layer.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#0F5223
Focused	md.comp.extended-fab.tertiary-container.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1
Focused	md.comp.extended-fab.tertiary-container.focused.label-text.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#0F5223
Focused	md.comp.extended-fab.tertiary-container.focused.icon.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#0F5223
Focused	md.comp.extended-fab.tertiary-container.focused.container.elevation	Elevation	md.sys.elevation.level3	6dp
Pressed	md.comp.extended-fab.tertiary-container.pressed.state-layer.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#0F5223
Pressed	md.comp.extended-fab.tertiary-container.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1
Pressed	md.comp.extended-fab.tertiary-container.pressed.label-text.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#0F5223
Pressed	md.comp.extended-fab.tertiary-container.pressed.icon.color	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#0F5223
Pressed	md.comp.extended-fab.tertiary-container.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp

Extended FAB - Size - Small · md.comp.extended-fab.small · 7 tokens

For expressive small extended FABs.

Group	Token	Type	Reference chain	Resolved value
All tokens	md.comp.extended-fab.small.container.height	Length	—	56dp
All tokens	md.comp.extended-fab.small.label-text	Typography	md.sys.typescale.title-medium → composite font names: md.sys.typescale.title-medium.font → md.ref.typeface.plain font weight: md.sys.typescale.title-medium.weight → md.ref.typeface.weight-medium font size: md.sys.typescale.title-medium.size line height: md.sys.typescale.title-medium.line-height font tracking: md.sys.typescale.title-medium.tracking	Google Sans Text · weight 500 · size 16pt · line height 24pt · tracking 0pt
All tokens	md.comp.extended-fab.small.icon.size	Length	—	24dp
All tokens	md.comp.extended-fab.small.container.shape	Shape	md.sys.shape.corner.large	Rounded corners 16dp
All tokens	md.comp.extended-fab.small.leading-space	Length	md.sys.measurement.space200	16dp
All tokens	md.comp.extended-fab.small.icon-label-space	Length	md.sys.measurement.space100	8dp
All tokens	md.comp.extended-fab.small.trailing-space	Length	md.sys.measurement.space200	16dp

Extended FAB - Size - Baseline · md.comp.extended-fab · 7 tokens

For baseline extended FABs. For expressive, use the small extended FAB token set `md.comp.extended-fab.small` instead.

Group	Token	Type	Reference chain	Resolved value
All tokens	md.comp.extended-fab.container.height	Length	—	56dp
All tokens	md.comp.extended-fab.label-text	Typography	md.sys.typescale.label-large → composite font names: md.sys.typescale.label-large.font → md.ref.typeface.plain font weight: md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium font size: md.sys.typescale.label-large.size line height: md.sys.typescale.label-large.line-height font tracking: md.sys.typescale.label-large.tracking	Google Sans Text · weight 500 · size 14pt · line height 20pt · tracking 0pt
All tokens	md.comp.extended-fab.icon.size	Length	—	24dp
All tokens	md.comp.extended-fab.container.shape	Shape	md.sys.shape.corner.large	Rounded corners 16dp
All tokens	md.comp.extended-fab.leading-space	Length	md.sys.measurement.space200	16dp
All tokens	md.comp.extended-fab.icon-label-space	Length	md.sys.measurement.space150	12dp
All tokens	md.comp.extended-fab.trailing-space	Length	md.sys.measurement.space250	20dp

Extended FAB - Color - Tertiary · md.comp.extended-fab.tertiary · 46 tokens

For tertiary color extended FABs.

Group	Token	Type	Reference chain	Resolved value
Enabled	md.comp.extended-fab.tertiary.container.elevation	Elevation	md.sys.elevation.level3	6dp
Enabled	md.comp.extended-fab.tertiary.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000
Enabled	md.comp.extended-fab.tertiary.label-text.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF
Enabled	md.comp.extended-fab.tertiary.icon.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF
Enabled	md.comp.extended-fab.tertiary.container.color	Color	md.sys.color.tertiary → md.ref.palette.tertiary40	#146C2E
Hovered	md.comp.extended-fab.tertiary.hovered.state-layer.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF
Hovered	md.comp.extended-fab.tertiary.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08
Hovered	md.comp.extended-fab.tertiary.hovered.label-text.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF
Hovered	md.comp.extended-fab.tertiary.hovered.icon.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF
Hovered	md.comp.extended-fab.tertiary.hovered.container.elevation	Elevation	md.sys.elevation.level4	8dp
Focused	md.comp.extended-fab.tertiary.focused.state-layer.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF
Focused	md.comp.extended-fab.tertiary.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1
Focused	md.comp.extended-fab.tertiary.focused.label-text.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF
Focused	md.comp.extended-fab.tertiary.focused.icon.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF
Focused	md.comp.extended-fab.tertiary.focused.container.elevation	Elevation	md.sys.elevation.level3	6dp
Pressed	md.comp.extended-fab.tertiary.pressed.state-layer.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF
Pressed	md.comp.extended-fab.tertiary.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1
Pressed	md.comp.extended-fab.tertiary.pressed.label-text.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF
Pressed	md.comp.extended-fab.tertiary.pressed.icon.color	Color	md.sys.color.on-tertiary → md.ref.palette.tertiary100	#FFFFFF
Pressed	md.comp.extended-fab.tertiary.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp
[Deprecated] Enabled › [Deprecated] Container	md.comp.extended-fab.tertiary.lowered.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp
[Deprecated] Enabled › [Deprecated] Container	md.comp.extended-fab.tertiary.container.height (deprecated)	Length	—	56dp
[Deprecated] Enabled › [Deprecated] Container	md.comp.extended-fab.tertiary.container.shape (deprecated)	Shape	md.sys.shape.corner.large	Rounded corners 16dp
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.tertiary.label-text.font (deprecated)	Font names	md.sys.typescale.label-large.font → md.ref.typeface.plain	Google Sans Text
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.tertiary.label-text.line-height (deprecated)	Line height	md.sys.typescale.label-large.line-height	20pt
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.tertiary.label-text.size (deprecated)	Font size	md.sys.typescale.label-large.size	14pt
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.tertiary.label-text.tracking (deprecated)	Font tracking	md.sys.typescale.label-large.tracking	0pt
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.tertiary.label-text.weight (deprecated)	Font weight	md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium	500
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.tertiary.label-text.type (deprecated)	Typography	composite font names: md.comp.extended-fab.tertiary.label-text.font → md.sys.typescale.label-large.font → md.ref.typeface.plain font weight: md.comp.extended-fab.tertiary.label-text.weight → md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium font size: md.comp.extended-fab.tertiary.label-text.size → md.sys.typescale.label-large.size line height: md.comp.extended-fab.tertiary.label-text.line-height → md.sys.typescale.label-large.line-height font tracking: md.comp.extended-fab.tertiary.label-text.tracking → md.sys.typescale.label-large.tracking	Google Sans Text · weight 500 · size 14pt · line height 20pt · tracking 0pt
[Deprecated] Enabled › [Deprecated] Icon	md.comp.extended-fab.tertiary.icon.size (deprecated)	Length	—	24dp
[Deprecated] Hovered › [Deprecated] Container	md.comp.extended-fab.tertiary.hover.container.elevation (deprecated)	Elevation	md.sys.elevation.level4	8dp
[Deprecated] Hovered › [Deprecated] Container	md.comp.extended-fab.tertiary.lowered.hover.container.elevation (deprecated)	Elevation	md.sys.elevation.level2	3dp
[Deprecated] Hovered › [Deprecated] Label text	md.comp.extended-fab.tertiary.hover.label-text.color (deprecated)	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#0F5223
[Deprecated] Hovered › [Deprecated] State layer	md.comp.extended-fab.tertiary.hover.state-layer.color (deprecated)	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#0F5223
[Deprecated] Hovered › [Deprecated] State layer	md.comp.extended-fab.tertiary.hover.state-layer.opacity (deprecated)	Opacity	md.sys.state.hover.state-layer-opacity	0.08
[Deprecated] Hovered › [Deprecated] Icon	md.comp.extended-fab.tertiary.hover.icon.color (deprecated)	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#0F5223
[Deprecated] Focused › [Deprecated] Container	md.comp.extended-fab.tertiary.focus.container.elevation (deprecated)	Elevation	md.sys.elevation.level3	6dp
[Deprecated] Focused › [Deprecated] Container	md.comp.extended-fab.tertiary.lowered.focus.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp
[Deprecated] Focused › [Deprecated] Label text	md.comp.extended-fab.tertiary.focus.label-text.color (deprecated)	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#0F5223
[Deprecated] Focused › [Deprecated] State layer	md.comp.extended-fab.tertiary.focus.state-layer.color (deprecated)	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#0F5223
[Deprecated] Focused › [Deprecated] State layer	md.comp.extended-fab.tertiary.focus.state-layer.opacity (deprecated)	Opacity	md.sys.state.focus.state-layer-opacity	0.1
[Deprecated] Focused › [Deprecated] Icon	md.comp.extended-fab.tertiary.focus.icon.color (deprecated)	Color	md.sys.color.on-tertiary-container → md.ref.palette.tertiary30	#0F5223
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.extended-fab.tertiary.focus.indicator.color (deprecated)	Color	md.sys.color.secondary → md.ref.palette.secondary40	#00639B
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.extended-fab.tertiary.focus.indicator.thickness (deprecated)	Length	md.sys.state.focus-indicator.thickness	3dp
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.extended-fab.tertiary.focus.indicator.outline.offset (deprecated)	Length	md.sys.state.focus-indicator.outer-offset	2dp
[Deprecated] Pressed (ripple) › [Deprecated] Container	md.comp.extended-fab.tertiary.lowered.pressed.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp

Extended FAB - Color - Surface · md.comp.extended-fab.surface · 38 tokens

For surface color extended FABs. Not recommended with expressive extended FABs.

Group	Token	Type	Reference chain	Resolved value
Enabled › Container	md.comp.extended-fab.surface.container.color	Color	md.sys.color.surface-container-high	#E9EEF6
Enabled › Container	md.comp.extended-fab.surface.lowered.container.color	Color	md.sys.color.surface-container-low	#F8FAFD
Enabled › Container	md.comp.extended-fab.surface.container.shape	Shape	md.sys.shape.corner.large	Rounded corners 16dp
Enabled › Container	md.comp.extended-fab.surface.container.height	Length	—	56dp
Enabled › Container	md.comp.extended-fab.surface.container.elevation	Elevation	md.sys.elevation.level3	6dp
Enabled › Container	md.comp.extended-fab.surface.container.surface-tint-layer.color (deprecated)	Color	md.sys.color.surface-tint	#6991D6
Enabled › Container	md.comp.extended-fab.surface.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000
Enabled › Container	md.comp.extended-fab.surface.lowered.container.elevation	Elevation	md.sys.elevation.level1	1dp
Enabled › Label text	md.comp.extended-fab.surface.label-text.font	Font names	md.sys.typescale.label-large.font → md.ref.typeface.plain	Google Sans Text
Enabled › Label text	md.comp.extended-fab.surface.label-text.line-height	Line height	md.sys.typescale.label-large.line-height	20pt
Enabled › Label text	md.comp.extended-fab.surface.label-text.size	Font size	md.sys.typescale.label-large.size	14pt
Enabled › Label text	md.comp.extended-fab.surface.label-text.weight	Font weight	md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium	500
Enabled › Label text	md.comp.extended-fab.surface.label-text.tracking	Font tracking	md.sys.typescale.label-large.tracking	0pt
Enabled › Label text	md.comp.extended-fab.surface.label-text.type	Typography	composite font names: md.comp.extended-fab.surface.label-text.font → md.sys.typescale.label-large.font → md.ref.typeface.plain font weight: md.comp.extended-fab.surface.label-text.weight → md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium font size: md.comp.extended-fab.surface.label-text.size → md.sys.typescale.label-large.size line height: md.comp.extended-fab.surface.label-text.line-height → md.sys.typescale.label-large.line-height font tracking: md.comp.extended-fab.surface.label-text.tracking → md.sys.typescale.label-large.tracking	Google Sans Text · weight 500 · size 14pt · line height 20pt · tracking 0pt
Enabled › Label text	md.comp.extended-fab.surface.label-text.color	Color	md.sys.color.primary → md.ref.palette.primary40	#0B57D0
Enabled › Icon	md.comp.extended-fab.surface.icon.size	Length	—	24dp
Enabled › Icon	md.comp.extended-fab.surface.icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#0B57D0
Hovered › Container	md.comp.extended-fab.surface.hover.container.elevation	Elevation	md.sys.elevation.level4	8dp
Hovered › Container	md.comp.extended-fab.surface.lowered.hover.container.elevation	Elevation	md.sys.elevation.level2	3dp
Hovered › Label text	md.comp.extended-fab.surface.hover.label-text.color	Color	md.sys.color.primary → md.ref.palette.primary40	#0B57D0
Hovered › State layer	md.comp.extended-fab.surface.hover.state-layer.color	Color	md.sys.color.primary → md.ref.palette.primary40	#0B57D0
Hovered › State layer	md.comp.extended-fab.surface.hover.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08
Hovered › Icon	md.comp.extended-fab.surface.hover.icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#0B57D0
Focused › Container	md.comp.extended-fab.surface.focus.container.elevation	Elevation	md.sys.elevation.level3	6dp
Focused › Container	md.comp.extended-fab.surface.lowered.focus.container.elevation	Elevation	md.sys.elevation.level1	1dp
Focused › Label text	md.comp.extended-fab.surface.focus.label-text.color	Color	md.sys.color.primary → md.ref.palette.primary40	#0B57D0
Focused › State layer	md.comp.extended-fab.surface.focus.state-layer.color	Color	md.sys.color.primary → md.ref.palette.primary40	#0B57D0
Focused › State layer	md.comp.extended-fab.surface.focus.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1
Focused › Icon	md.comp.extended-fab.surface.focus.icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#0B57D0
Focused › Focus indicator	md.comp.extended-fab.surface.focus.indicator.color	Color	md.sys.color.secondary → md.ref.palette.secondary40	#00639B
Focused › Focus indicator	md.comp.extended-fab.surface.focus.indicator.thickness	Length	md.sys.state.focus-indicator.thickness	3dp
Focused › Focus indicator	md.comp.extended-fab.surface.focus.indicator.outline.offset	Length	md.sys.state.focus-indicator.outer-offset	2dp
Pressed (ripple) › Container	md.comp.extended-fab.surface.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp
Pressed (ripple) › Container	md.comp.extended-fab.surface.lowered.pressed.container.elevation	Elevation	md.sys.elevation.level1	1dp
Pressed (ripple) › Label text	md.comp.extended-fab.surface.pressed.label-text.color	Color	md.sys.color.primary → md.ref.palette.primary40	#0B57D0
Pressed (ripple) › State layer	md.comp.extended-fab.surface.pressed.state-layer.color	Color	md.sys.color.primary → md.ref.palette.primary40	#0B57D0
Pressed (ripple) › State layer	md.comp.extended-fab.surface.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1
Pressed (ripple) › Icon	md.comp.extended-fab.surface.pressed.icon.color	Color	md.sys.color.primary → md.ref.palette.primary40	#0B57D0

Extended FAB - Color - Secondary · md.comp.extended-fab.secondary · 46 tokens

For secondary color extended FABs.

Group	Token	Type	Reference chain	Resolved value
Enabled	md.comp.extended-fab.secondary.container.elevation	Elevation	md.sys.elevation.level3	6dp
Enabled	md.comp.extended-fab.secondary.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000
Enabled	md.comp.extended-fab.secondary.label-text.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF
Enabled	md.comp.extended-fab.secondary.icon.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF
Enabled	md.comp.extended-fab.secondary.container.color	Color	md.sys.color.secondary → md.ref.palette.secondary40	#00639B
Hovered	md.comp.extended-fab.secondary.hovered.state-layer.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF
Hovered	md.comp.extended-fab.secondary.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08
Hovered	md.comp.extended-fab.secondary.hovered.label-text.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF
Hovered	md.comp.extended-fab.secondary.hovered.icon.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF
Hovered	md.comp.extended-fab.secondary.hovered.container.elevation	Elevation	md.sys.elevation.level4	8dp
Focused	md.comp.extended-fab.secondary.focused.state-layer.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF
Focused	md.comp.extended-fab.secondary.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1
Focused	md.comp.extended-fab.secondary.focused.label-text.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF
Focused	md.comp.extended-fab.secondary.focused.icon.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF
Focused	md.comp.extended-fab.secondary.focused.container.elevation	Elevation	md.sys.elevation.level3	6dp
Pressed	md.comp.extended-fab.secondary.pressed.state-layer.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF
Pressed	md.comp.extended-fab.secondary.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1
Pressed	md.comp.extended-fab.secondary.pressed.label-text.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF
Pressed	md.comp.extended-fab.secondary.pressed.icon.color	Color	md.sys.color.on-secondary → md.ref.palette.secondary100	#FFFFFF
Pressed	md.comp.extended-fab.secondary.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp
[Deprecated] Enabled › [Deprecated] Container	md.comp.extended-fab.secondary.container.shape (deprecated)	Shape	md.sys.shape.corner.large	Rounded corners 16dp
[Deprecated] Enabled › [Deprecated] Container	md.comp.extended-fab.secondary.container.height (deprecated)	Length	—	56dp
[Deprecated] Enabled › [Deprecated] Container	md.comp.extended-fab.secondary.lowered.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.secondary.label-text.font (deprecated)	Font names	md.sys.typescale.label-large.font → md.ref.typeface.plain	Google Sans Text
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.secondary.label-text.line-height (deprecated)	Line height	md.sys.typescale.label-large.line-height	20pt
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.secondary.label-text.size (deprecated)	Font size	md.sys.typescale.label-large.size	14pt
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.secondary.label-text.weight (deprecated)	Font weight	md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium	500
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.secondary.label-text.tracking (deprecated)	Font tracking	md.sys.typescale.label-large.tracking	0pt
[Deprecated] Enabled › [Deprecated] Label text	md.comp.extended-fab.secondary.label-text.type (deprecated)	Typography	composite font names: md.comp.extended-fab.secondary.label-text.font → md.sys.typescale.label-large.font → md.ref.typeface.plain font weight: md.comp.extended-fab.secondary.label-text.weight → md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium font size: md.comp.extended-fab.secondary.label-text.size → md.sys.typescale.label-large.size line height: md.comp.extended-fab.secondary.label-text.line-height → md.sys.typescale.label-large.line-height font tracking: md.comp.extended-fab.secondary.label-text.tracking → md.sys.typescale.label-large.tracking	Google Sans Text · weight 500 · size 14pt · line height 20pt · tracking 0pt
[Deprecated] Enabled › [Deprecated] Icon	md.comp.extended-fab.secondary.icon.size (deprecated)	Length	—	24dp
[Deprecated] Hovered › [Deprecated] Container	md.comp.extended-fab.secondary.hover.container.elevation (deprecated)	Elevation	md.sys.elevation.level4	8dp
[Deprecated] Hovered › [Deprecated] Container	md.comp.extended-fab.secondary.lowered.hover.container.elevation (deprecated)	Elevation	md.sys.elevation.level2	3dp
[Deprecated] Hovered › [Deprecated] Label text	md.comp.extended-fab.secondary.hover.label-text.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#004A77
[Deprecated] Hovered › [Deprecated] State layer	md.comp.extended-fab.secondary.hover.state-layer.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#004A77
[Deprecated] Hovered › [Deprecated] State layer	md.comp.extended-fab.secondary.hover.state-layer.opacity (deprecated)	Opacity	md.sys.state.hover.state-layer-opacity	0.08
[Deprecated] Hovered › [Deprecated] Icon	md.comp.extended-fab.secondary.hover.icon.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#004A77
[Deprecated] Focused › [Deprecated] Container	md.comp.extended-fab.secondary.focus.container.elevation (deprecated)	Elevation	md.sys.elevation.level3	6dp
[Deprecated] Focused › [Deprecated] Container	md.comp.extended-fab.secondary.lowered.focus.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp
[Deprecated] Focused › [Deprecated] Label text	md.comp.extended-fab.secondary.focus.label-text.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#004A77
[Deprecated] Focused › [Deprecated] State layer	md.comp.extended-fab.secondary.focus.state-layer.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#004A77
[Deprecated] Focused › [Deprecated] State layer	md.comp.extended-fab.secondary.focus.state-layer.opacity (deprecated)	Opacity	md.sys.state.focus.state-layer-opacity	0.1
[Deprecated] Focused › [Deprecated] Icon	md.comp.extended-fab.secondary.focus.icon.color (deprecated)	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#004A77
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.extended-fab.secondary.focus.indicator.color (deprecated)	Color	md.sys.color.secondary → md.ref.palette.secondary40	#00639B
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.extended-fab.secondary.focus.indicator.thickness (deprecated)	Length	md.sys.state.focus-indicator.thickness	3dp
[Deprecated] Focused › [Deprecated] Focus indicator	md.comp.extended-fab.secondary.focus.indicator.outline.offset (deprecated)	Length	md.sys.state.focus-indicator.outer-offset	2dp
[Deprecated] Pressed (ripple) › [Deprecated] Container	md.comp.extended-fab.secondary.lowered.pressed.container.elevation (deprecated)	Elevation	md.sys.elevation.level1	1dp

Extended FAB - Color - Branded · md.comp.extended-fab.branded · 34 tokens

For branded color extended FABs. Not recommended with expressive extended FABs.

Group	Token	Type	Reference chain	Resolved value
Enabled › Container	md.comp.extended-fab.branded.container.color	Color	md.sys.color.surface-container-high	#E9EEF6
Enabled › Container	md.comp.extended-fab.branded.lowered.container.color	Color	md.sys.color.surface-container-low	#F8FAFD
Enabled › Container	md.comp.extended-fab.branded.container.shape	Shape	md.sys.shape.corner.large	Rounded corners 16dp
Enabled › Container	md.comp.extended-fab.branded.container.height	Length	—	56dp
Enabled › Container	md.comp.extended-fab.branded.container.elevation	Elevation	md.sys.elevation.level3	6dp
Enabled › Container	md.comp.extended-fab.branded.container.surface-tint-layer.color (deprecated)	Color	md.sys.color.surface-tint	#6991D6
Enabled › Container	md.comp.extended-fab.branded.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000
Enabled › Container	md.comp.extended-fab.branded.lowered.container.elevation	Elevation	md.sys.elevation.level1	1dp
Enabled › Label text	md.comp.extended-fab.branded.label-text.font	Font names	md.sys.typescale.label-large.font → md.ref.typeface.plain	Google Sans Text
Enabled › Label text	md.comp.extended-fab.branded.label-text.line-height	Line height	md.sys.typescale.label-large.line-height	20pt
Enabled › Label text	md.comp.extended-fab.branded.label-text.size	Font size	md.sys.typescale.label-large.size	14pt
Enabled › Label text	md.comp.extended-fab.branded.label-text.weight	Font weight	md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium	500
Enabled › Label text	md.comp.extended-fab.branded.label-text.tracking	Font tracking	md.sys.typescale.label-large.tracking	0pt
Enabled › Label text	md.comp.extended-fab.branded.label-text.type	Typography	composite font names: md.comp.extended-fab.branded.label-text.font → md.sys.typescale.label-large.font → md.ref.typeface.plain font weight: md.comp.extended-fab.branded.label-text.weight → md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium font size: md.comp.extended-fab.branded.label-text.size → md.sys.typescale.label-large.size line height: md.comp.extended-fab.branded.label-text.line-height → md.sys.typescale.label-large.line-height font tracking: md.comp.extended-fab.branded.label-text.tracking → md.sys.typescale.label-large.tracking	Google Sans Text · weight 500 · size 14pt · line height 20pt · tracking 0pt
Enabled › Label text	md.comp.extended-fab.branded.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1F1F1F
Enabled › Icon	md.comp.extended-fab.branded.icon.size	Length	—	36dp
Hovered › Container	md.comp.extended-fab.branded.hover.container.elevation	Elevation	md.sys.elevation.level4	8dp
Hovered › Container	md.comp.extended-fab.branded.lowered.hover.container.elevation	Elevation	md.sys.elevation.level2	3dp
Hovered › Label text	md.comp.extended-fab.branded.hover.label-text.color	Color	md.sys.color.primary → md.ref.palette.primary40	#0B57D0
Hovered › State layer	md.comp.extended-fab.branded.hover.state-layer.color	Color	md.sys.color.primary → md.ref.palette.primary40	#0B57D0
Hovered › State layer	md.comp.extended-fab.branded.hover.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08
Focused › Container	md.comp.extended-fab.branded.focus.container.elevation	Elevation	md.sys.elevation.level3	6dp
Focused › Container	md.comp.extended-fab.branded.lowered.focus.container.elevation	Elevation	md.sys.elevation.level1	1dp
Focused › Label text	md.comp.extended-fab.branded.focus.label-text.color	Color	md.sys.color.primary → md.ref.palette.primary40	#0B57D0
Focused › State layer	md.comp.extended-fab.branded.focus.state-layer.color	Color	md.sys.color.primary → md.ref.palette.primary40	#0B57D0
Focused › State layer	md.comp.extended-fab.branded.focus.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1
Focused › Focus indicator	md.comp.extended-fab.branded.focus.indicator.color	Color	md.sys.color.secondary → md.ref.palette.secondary40	#00639B
Focused › Focus indicator	md.comp.extended-fab.branded.focus.indicator.thickness	Length	md.sys.state.focus-indicator.thickness	3dp
Focused › Focus indicator	md.comp.extended-fab.branded.focus.indicator.outline.offset	Length	md.sys.state.focus-indicator.outer-offset	2dp
Pressed (ripple) › Container	md.comp.extended-fab.branded.pressed.container.elevation	Elevation	md.sys.elevation.level3	6dp
Pressed (ripple) › Container	md.comp.extended-fab.branded.lowered.pressed.container.elevation	Elevation	md.sys.elevation.level1	1dp
Pressed (ripple) › Label text	md.comp.extended-fab.branded.pressed.label-text.color	Color	md.sys.color.primary → md.ref.palette.primary40	#0B57D0
Pressed (ripple) › State layer	md.comp.extended-fab.branded.pressed.state-layer.color	Color	md.sys.color.primary → md.ref.palette.primary40	#0B57D0
Pressed (ripple) › State layer	md.comp.extended-fab.branded.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1

Baseline colors

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

Extended FAB color roles used for light and dark schemes:

1. Primary container + shadow
2. On primary container
3. On primary container

Additional color mappings

Extended FABs can use other combinations of container and icon colors. The color mappings below provide the same legibility and functionality as the default, so the color mapping you use depends on style alone.

Extended FABs can use different combinations of container and icon colors

Baseline states

States are visual representations used to communicate the status of a component or interactive element. Learn more about interaction states

1. Enabled 
2. Hovered 
3. Focused 
4. Pressed

Baseline measurements

Extended FABs have a padding of 16dp

Extended FAB height, width, and icon size

Attribute	Value
Container height	56dp
Container width	Dynamic, 80dp min
Container shape	16dp corner radius
Icon size	24dp
Padding	16dp