---
url: /components/extended-fab/guidelines.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](specs.md) · **Guidelines** · [Accessibility](accessibility.md)
Extended FABs are more prominent than regular FABs
## Usage
Use an extended FAB on screens with long, scrolling views that require persistent access to an action, such as a checkout screen.
Use it when label text helps understand the main action, or to add further emphasis to the button.
Extended FABs ensure the main action is visible at all times
Use an extended FAB to provide constant access to a primary action above long-scrolling surface content
Use an extended FAB to emphasize a page’s primary action
### Additional emphasis
The extended FAB can provide more emphasis and clarity to a product’s primary action.
Since it has room for both a text label and icon, the extended FAB can be effective where an icon alone is ambiguous. However, the relationship between an extended FAB's icon and label should be clear.
An extended FAB can be effective where an icon alone is too vague
Like the regular FAB, only one extended FAB should be used per screen.
Multiple FABs compete for attention.
If additional high-level actions are required, consider adding more buttons elsewhere on the page.
::: tip Do
Only show one prominent action at a time with the extended FAB
:::
::: danger Don't
Don’t use multiple extended FABs in one screen as it disrupts visual hierarchy
:::
The extended FAB shouldn't be used as an option in a set of actions.
Instead, use filled buttons for a similar level of emphasis.
::: tip Do
Use a button with appropriate styling to emphasize it in a group of buttons
:::
::: danger Don't
Don’t use the extended FAB to convey an option in a set of actions
:::
### Choosing a size
There are three variants of extended FABs: small, medium, and large.
Choose an appropriately-sized extended FAB to add the right amount of emphasis for an action.
In compact windows with one prominent action, the large extended FAB can be appropriate.
In larger breakpoints, use a medium or large extended FAB.
There are three sizes of extended FABs
## Anatomy
1. Container
2. Label text
3. Icon (optional)
### Container
The extended FAB container is a rounded rectangle that hugs its contents.
The extended FAB grows and shrinks with text length.
The extended FAB container hugs the icon and text
### Icon (optional)
An extended FAB's icon should intuitively represent its action.
::: tip Do
Unlike standard FABs, extended FABs don't require an icon
:::
::: danger Don't
An extended FAB can't have an icon without a text label
:::
### Label text
The extended FAB’s label should clearly describe its action.
Use 1–2 words at most. Keep in mind that localization may increase the amount of characters and width of the extended FAB.
::: tip Do
Shorten the text as much as needed. Include an icon for additional context.
:::
::: danger Don't
Avoid wrapping or truncating text
:::
## Placement
::: tip Do
Place the extended FAB above the rest of the UI, off of elements like app bars
:::
::: danger Don't
Don’t place the extended FAB on top of toolbars. It disrupts the consistency of the elevation and surface layers.
:::
::: danger Don't
Don’t place the extended FAB in the upper half of a mobile screen, as it disrupts the reading of the UI
:::
::: danger Don't
Don’t place extended FABs on cards or inside other containers
:::
Avoid putting other floating components, like the [floating toolbar](../toolbars/overview.md "Floating toolbars float on top of page content and can provide contextual, dynamic actions."), on screen with the extended FAB.
::: danger Don't
Floating toolbars can be paired with FABs, but not extended FABs
:::
## Responsive layout
The FAB and extended FAB can transform into each other depending on available space and layout.
In a [collapsed navigation rail](../navigation-rail/overview.md "Collpased navigation rails take up minimal space and are best for medium windows and wider."), a FAB would be used. When the rail is expanded, the FAB can transform into an extended FAB.
When space is limited, an extended FAB can transform into a FAB
### Right-to-left languages
Extended FABs should mirror their elements in right-to-left (RTL) languages.
Icons should be placed to the left of labels for left-to-right (LTR) languages
Icons should be placed to the right of labels for RTL languages
### Breakpoints
In [compact](../../foundations/layout/breakpoints/compact.md "Window widths smaller than 600dp, such as a phone in portrait orientation.") and [medium breakpoints](../../foundations/layout/breakpoints/medium.md "Window widths from 600dp to 839dp, such as a tablet or foldable in portrait orientation."), the extended FAB should be placed at the bottom of the screen, either center-aligned or aligned to the trailing edge of the window.
The extended FAB can be center-aligned
The extended FAB can be aligned to the trailing edge of the window
In [expanded](../../foundations/layout/breakpoints/expanded.md "Window widths 840dp to 1199dp, such as a tablet or foldable in landscape orientation, or desktop.") and larger breakpoints, the extended FAB should appear either:
* At the bottom right edge of the window, in both LTR and RTL languages
* Within the navigation rail
The extended FAB can be right-aligned in both LTR and RTL languages
The extended FAB can be at the top of the expanded navigation rail
## Behavior
### Appearing
The extended FAB surface expands when appearing on screen using an [enter and exit](../../styles/motion/transitions/transition-patterns.md#e1c2a650-d7a4-4a6d-9025-e6b7845291ed) transition pattern.
An extended FAB expands when appearing on screen
### Expanding
The extended FAB can expand and adapt to any shape using a [container transform](../../styles/motion/transitions/transition-patterns.md) transition pattern.
This includes a surface that is part of the app structure, or a surface that spans the entire screen.
An extended FAB can expand and adapt to any shape
### Transforming
The extended FAB can transform into a FAB on scroll to temporarily take up less space on screen.
An extended FAB can transform into a FAB
### Scrolling
The extended FAB can transform into a FAB when scrolling down, and back to an extended FAB when scrolling up.
An extended FAB collapses and expands when scrolling
When the FAB switches to an extended FAB, the following transitions occur:
* The FAB shape changes
* FAB icon moves to the left
* FAB text label fades in
FAB switches to an extended FAB