---
url: /components/floating-action-button/specs.md
description: >-
  Floating action buttons (FABs) help people take primary actions. They’re used
  to represent the most important action on a screen, such as Create or Reply.
---

# FABs

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

[Overview](overview.md) · **Specs** · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

## Variants

![An icon on the container of a FAB, medium FAB, and large FAB.](/assets/7aa80390-mkc6atia-01-3p.CwOHH-jr.webp)

1. FAB
2. Medium FAB
3. Large FAB

### Baseline variants

The small FAB is still available, but no longer recommended. [Jump to baseline specs](#cd336045-e97d-4a6d-ac23-f778fa695e3c)

![An icon on the container of a small FAB.](/assets/d735caf3-mkc6bkq8-02-3p.CrlVXv_J.webp)

1\. Small FAB

| Variant    |     M3    |              M3 Expressive             |
| ---------- | :-------: | :------------------------------------: |
| FAB        | Available |                Available               |
| Medium FAB |     --    |                Available               |
| Large FAB  | Available |                Available               |
| Small FAB  | Available | Not recommended.<br>Use a larger size. |

## Configurations

In the expressive update, the **primary**, **secondary**, and **tertiary** set colors were renamed to **primary container**, **secondary container**, and **tertiary container&#xA0;**&#x74;o match the actual color roles used. New primary, secondary, and tertiary color styles were created to match the corresponding color roles. [View details in the color styles section](#67e71ec7-b520-405a-aa06-2decfa0b92a3)

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

## Tokens & specs

Use the table's menu to select a token set. FAB tokens are organized by size and color. [Learn more about design tokens](../../foundations/design-tokens/overview.md)

::: token-table token-table-41587918e51cca98-0fa46101
**Floating action buttons (FABs) tokens** · 9 token sets · 165 tokens · [live token table](https://m3.material.io/components/floating-action-button/specs) · DSDB `TOKEN_TABLE.41587918e51cca98`

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

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

For the default, regular FAB size.

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

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

For medium FABs.

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

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

For large FABs.

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

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

For tonal primary container FABs.

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

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

For tonal secondary container FABs.

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

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

For tonal tertiary container FABs.

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

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

For primary color FABs.

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

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

For secondary color FABs.

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

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

For the tertiary style fab.

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

## Anatomy

![2 elements of the FAB.](/assets/e8ec5d81-mkc6cml8-03-3p.CW_J_xjJ.webp)

1\. Container

2\. Icon

## Color

Color values are implemented through design tokens. For design, this means working with color values that correspond with tokens. In implementation, a color value will be a token that references a value. [Learn more about design tokens](../../foundations/design-tokens/overview.md)

<a id="67e71ec7-b520-405a-aa06-2decfa0b92a3"></a>

### Color styles

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

![6 FAB color styles in light and dark themes. Each style has 2 color roles, 1 for the container and icon.](/assets/b5b837b6-mkc6diiz-04-3p.YkHItekD.webp)

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

### Baseline color styles

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

![Baseline FAB style in all 3 sizes.](/assets/f8045dd5-mkc6empp-05-3p.CwwVTcVX.webp)

1. Surface FABs

## States

States are visual representations used to communicate the status of a component or interactive element.<br><br>When using a non-default color mapping for FABs, make sure the state layer color is the same as the icon color. For example, the state layer color for the **primary** color style should be `md.sys.color.primary`.

![4 states of a FAB shown in light and dark themes.](/assets/391b63d8-mkc6fdu1-06-3p.DxdIhc51.webp)

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

## Measurements

### FAB

![FAB size measurements.](/assets/06d27abc-mkc6fz4n-07-3p.CYSOzeJ0.webp)

FAB size measurements

![FAB padding measurements.](/assets/a2b9d295-mkc6gdhg-08-3p.BVbXUpo5.webp)

FAB padding measurements

### Medium FAB

![Medium FAB size measurements.](/assets/0ef31bd4-mkc6gu0p-09-3p.Bhu1e2l0.webp)

Medium FAB size measurements

![Medium FAB padding measurements.](/assets/c6d60450-mkc6ha1z-10-3p.BW5LGzdd.webp)

Medium FAB padding measurements

### Large FAB

![Large FAB size measurements.](/assets/27ded031-mkc6hrgc-11-3p.iA3AiSDm.webp)

Large FAB size measurements

![Large FAB padding measurements.](/assets/ffe9c7e2-mkc6i508-12-3p.DWCcnuN2.webp)

Large FAB padding measurements

<a id="cd336045-e97d-4a6d-ac23-f778fa695e3c"></a>

## Baseline tokens & specs

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

::: token-table token-table-41587918e51cca98-7c0e419b
**Floating action buttons (FABs) tokens** · 1 token set · 29 tokens · [live token table](https://m3.material.io/components/floating-action-button/specs) · DSDB `TOKEN_TABLE.41587918e51cca98`

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

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

For surface color FABs. Not recommended with expressive FABs.

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