---
url: /components/floating-action-button/overview.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** · [Specs](specs.md) · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

![FABs](/assets/5e6c8131-mrol052s-fab.CjK6KMZn.webp)

* Use a FAB for the most common or important action on a screen
* Make sure the icon in a FAB is clear and understandable
* FABs persist on the screen when content is scrolling
* Three variants: FAB, medium FAB, large FAB

![The 3 sizes of floating action buttons.](/assets/da6aa523-mkap9gay-01.dWewYqVg.webp)

1. FAB
2. Medium FAB
3. Large FAB

## Availability & resources

| Type | Resource | Status |
| --- | --- | --- |
| Design | [Design Kit (Figma)](https://www.figma.com/community/file/1035203688168086460) | Available |
| Implementation | [Flutter](https://api.flutter.dev/flutter/material/FloatingActionButton-class.html) | Available |
| Implementation | [Jetpack Compose](https://developer.android.com/develop/ui/compose/components/fab) | Available |
| Implementation | [Jetpack Compose: Expressive](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#FloatingActionButton\(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material3.FloatingActionButtonElevation,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0\)) | Available |
| Implementation | [Android Views (MDC-Android)](https://github.com/material-components/material-components-android/blob/master/docs/components/FloatingActionButton.md) | Available |
| Implementation | [Android Views (MDC-Android): Expressive](https://github.com/material-components/material-components-android/blob/master/docs/components/FloatingActionButton.md) | Available |
| Implementation | [Web](https://github.com/material-components/material-web/blob/main/docs/components/fab.md) | Available |
| Implementation | Web: Expressive | Unavailable |

## M3 Expressive update

**May 2025**

The FAB has new sizes to match the extended FAB and more color options. The small FAB is no longer recommended. [More on M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive)

Variants and naming:

* Added **medium** FAB size
* **Small** FAB size is no longer recommended
* FAB and large FAB sizes are unchanged
* FAB variants are based on size, not color

Color:

* Added tone color styles: 

  * Primary
  * Secondary
  * Tertiary

* Renamed existing tonal color styles to match their token names: 

  * **Primary** to **Primary container**
  * **Secondary** to **Secondary container**
  * **Tertiary** to **Tertiary container**
  * The values haven't changed

* Surface color FABs are no longer recommended

![4 FABs showing the colors available after the expressive update.](/assets/cb1a8ccc-mkc68z96-02.BaMe9-rt.webp)

FABs have updated colors and sizes

## Differences from M2

![M2 circular FAB with a plus icon.](/assets/f43f589e-mkc69mae-03-3p.C-Bmho0F.webp)

M2: FABs are circles and always have a drop shadow

![M3 rounded corner square FAB with an artist’s palette icon.](/assets/03b75172-mkc6a5yd-04.BkloE6BT.webp)

M3: FABs have a boxier shape, can use dynamic color, and include a new large FAB variation