Usage
A FAB or Floating action button holds the single most important action on a screen and stays visible above the content as the person scrolls. Use the extended FAB when the action needs a label to be clear on its own.
- Use one FAB per screen, for the action people came to that screen to take.
- Use the extended FAB when an icon alone won’t make the action clear.
- Keep the FAB clear of bottom bars and toolbars, unless it’s the FAB inside a floating toolbar.
- Use a FAB for an action that isn’t the primary one on the screen (use a button or an icon button).
- Use more than one FAB on a screen.
Design properties
| Property | Values | Default |
|---|---|---|
| State Variant | Enabled | Hovered | Focused | Pressed | Disabled | Enabled |
| Property | Values | Default |
|---|---|---|
| State Variant | Enabled | Hovered | Focused | Pressed | Disabled | Enabled |
Types
FAB
Use for the primary action when an icon alone makes that action clear.
Extended FAB
Use when the action needs a text label to be understood.
Behavior and interaction
Behavior
- The FAB stays visible above the content as the person scrolls.
- It responds to touch with a ripple that confirms the input before the action runs.
- Five states are designed: enabled, hovered, focused, pressed, and disabled.
Positioning
- Position the FAB space_static200 (16dp) from the trailing and bottom edges of the screen.
- Keep it above any bottom bar or toolbar. A FAB placed inside a toolbar is the exception.
Writing guidelines
Reference Buttons for Extended FAB writing guidelines.
Related components
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Oct 22, 2025 |
1.0.0 |
Initial draft of guidance |