---
url: /components/extended-fab/specs.md
description: >-
  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.
---

# 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](overview.md) · **Specs** · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

## Variants

![3 variants of extended FABs.](/assets/10b55121-ma3rfc55-01-3p.BmHFEUIM.webp)

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](#01e114e6-8c3d-4d39-9376-65aa5c10e01b)

![1 baseline extended FAB.](/assets/dae510ff-ma3rfwo5-02-3p.CzqoeDKi.webp)

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

::: token-table token-table-36500f77b86d20a5-5232fe44
**Extended FAB tokens** · 9 token sets · 219 tokens · [live token table](https://m3.material.io/components/extended-fab/specs) · 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<br>font names: `md.sys.typescale.title-medium.font` → `md.ref.typeface.plain`<br>font weight: `md.sys.typescale.title-medium.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.sys.typescale.title-medium.size`<br>line height: `md.sys.typescale.title-medium.line-height`<br>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<br>font names: `md.sys.typescale.title-large.font` → `md.ref.typeface.brand`<br>font weight: `md.sys.typescale.title-large.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.sys.typescale.title-large.size`<br>line height: `md.sys.typescale.title-large.line-height`<br>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<br>font names: `md.sys.typescale.headline-small.font` → `md.ref.typeface.brand`<br>font weight: `md.sys.typescale.headline-small.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.sys.typescale.headline-small.size`<br>line height: `md.sys.typescale.headline-small.line-height`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#6750A4` via `md.ref.palette.primary40`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#625B71` via `md.ref.palette.secondary40`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#7D5260` via `md.ref.palette.tertiary40`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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<br>font names: `md.comp.extended-fab.primary.label-text.font` → `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.extended-fab.primary.label-text.weight` → `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.extended-fab.primary.label-text.size` → `md.sys.typescale.label-large.size`<br>line height: `md.comp.extended-fab.primary.label-text.line-height` → `md.sys.typescale.label-large.line-height`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>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`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>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`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>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<br>font names: `md.comp.extended-fab.secondary.label-text.font` → `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.extended-fab.secondary.label-text.weight` → `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.extended-fab.secondary.label-text.size` → `md.sys.typescale.label-large.size`<br>line height: `md.comp.extended-fab.secondary.label-text.line-height` → `md.sys.typescale.label-large.line-height`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>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`<br>Medium contrast: `#633B48` via `md.ref.palette.tertiary30`<br>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<br>font names: `md.comp.extended-fab.tertiary.label-text.font` → `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.extended-fab.tertiary.label-text.weight` → `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.extended-fab.tertiary.label-text.size` → `md.sys.typescale.label-large.size`<br>line height: `md.comp.extended-fab.tertiary.label-text.line-height` → `md.sys.typescale.label-large.line-height`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.tertiary100`<br>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`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>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

![3 elements of extended FABs.](/assets/6d9bb2bb-ma3rgmo9-03-3p.B0YHkUPD.webp)

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](../../foundations/design-tokens/overview.md)

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

![6 extended FAB color styles.](/assets/b6ce1d2e-ma3rha4a-04-3p.CLvMV8dP.webp)

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 baseline extended FAB color style.](/assets/02f4cbc6-ma3ri2r1-05-3p.CRRvAwgH.webp)

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](../../foundations/interaction/states/overview.md)

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.

![4 states of extended FABs.](/assets/1e740b29-maljqck5-06-3p.Csqc1gZO.webp)

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

## Measurements

![Extended FAB padding and size measurements.](/assets/04e76e75-ma3rj563-07-3p.gJ-5Y1L0.webp)

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

![Extended FAB margin measurements.](/assets/6cf2c0ac-ma3rjn8g-08-3p.CHhu2uWW.webp)

Extended FABs should have margins of 16dp

<a id="01e114e6-8c3d-4d39-9376-65aa5c10e01b"></a>

## Baseline extended FAB

![3 elements of baseline extended FAB.](/assets/bb50d2f0-ma3rm9q3-10-3p.Dnz8Ag1h.webp)

1. Container
2. Label text
3. Icon

### Baseline configurations

![Baseline extended FAB with icon.](/assets/9b325de1-ml9o6q6p-15-3p.C3xOg0uz.webp)

With icon

![Baseline extended FAB without icon.](/assets/2386d7c0-ml9o6v12-16-3p.C7njDqOl.webp)

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.

::: token-table token-table-36500f77b86d20a5-ad57b2e7
**Extended FAB tokens** · 12 token sets · 298 tokens · [live token table](https://m3.material.io/components/extended-fab/specs) · 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<br>font names: `md.comp.extended-fab.primary.label-text.font` → `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.extended-fab.primary.label-text.weight` → `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.extended-fab.primary.label-text.size` → `md.sys.typescale.label-large.size`<br>line height: `md.comp.extended-fab.primary.label-text.line-height` → `md.sys.typescale.label-large.line-height`<br>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<br>font names: `md.sys.typescale.headline-small.font` → `md.ref.typeface.brand`<br>font weight: `md.sys.typescale.headline-small.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.sys.typescale.headline-small.size`<br>line height: `md.sys.typescale.headline-small.line-height`<br>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<br>font names: `md.sys.typescale.title-large.font` → `md.ref.typeface.brand`<br>font weight: `md.sys.typescale.title-large.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.sys.typescale.title-large.size`<br>line height: `md.sys.typescale.title-large.line-height`<br>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<br>font names: `md.sys.typescale.title-medium.font` → `md.ref.typeface.plain`<br>font weight: `md.sys.typescale.title-medium.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.sys.typescale.title-medium.size`<br>line height: `md.sys.typescale.title-medium.line-height`<br>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<br>font names: `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`<br>font weight: `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.sys.typescale.label-large.size`<br>line height: `md.sys.typescale.label-large.line-height`<br>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<br>font names: `md.comp.extended-fab.tertiary.label-text.font` → `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.extended-fab.tertiary.label-text.weight` → `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.extended-fab.tertiary.label-text.size` → `md.sys.typescale.label-large.size`<br>line height: `md.comp.extended-fab.tertiary.label-text.line-height` → `md.sys.typescale.label-large.line-height`<br>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<br>font names: `md.comp.extended-fab.surface.label-text.font` → `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.extended-fab.surface.label-text.weight` → `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.extended-fab.surface.label-text.size` → `md.sys.typescale.label-large.size`<br>line height: `md.comp.extended-fab.surface.label-text.line-height` → `md.sys.typescale.label-large.line-height`<br>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<br>font names: `md.comp.extended-fab.secondary.label-text.font` → `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.extended-fab.secondary.label-text.weight` → `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.extended-fab.secondary.label-text.size` → `md.sys.typescale.label-large.size`<br>line height: `md.comp.extended-fab.secondary.label-text.line-height` → `md.sys.typescale.label-large.line-height`<br>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<br>font names: `md.comp.extended-fab.branded.label-text.font` → `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.extended-fab.branded.label-text.weight` → `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.extended-fab.branded.label-text.size` → `md.sys.typescale.label-large.size`<br>line height: `md.comp.extended-fab.branded.label-text.line-height` → `md.sys.typescale.label-large.line-height`<br>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](../../foundations/design-tokens/overview.md)

![3 baseline extended FAB color roles.](/assets/ff75d44f-ma3rmvmo-11-3p.BzHjWH3X.webp)

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.

![3 deprecated extended FABs with different container and icon colors.](/assets/98832132-ma3rnofz-12-3p.DPBQPIxx.webp)

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](../../foundations/interaction/states/overview.md)

![4 states of baseline extended FAB.](/assets/f935031e-maljrky7-13-3p.DzTN-7iX.webp)

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

### Baseline measurements

![Margins of baseline extended FAB.](/assets/6c35fa39-maebvm3w-14-3p.D96MrbNP.webp)

Extended FABs have a padding of 16dp

![Size of baseline extended FAB while on screen.](/assets/f82e6ef1-maebvv3o-15-3p.CmjYxXkk.webp)

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        |