Floating action button
Floating action buttons are used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.
Floating action buttons come in two sizes:
- Default size: For most use cases
- Mini size: Only used to create visual continuity with other screen elements
The floating action button should be placed 16dp minimum from the edge on mobile and 24dp minimum on tablet/desktop.
The floating action button has an ink wash upon focus and lifts upon being selected.
Not every screen needs a floating action button. A floating action button represents the primary action in an application.
Only one floating action button is recommended per screen to increase its prominence. It should represent only the most common action.
Make floating action buttons positive actions like Create, Favorite, Share, Navigate, and Explore.
Avoid using floating action buttons for minor and destructive actions, including the following:
- Archive or Trash
- Nonspecific actions
- Alerts or errors
- Limited tasks like cutting text
- Controls that should be in a toolbar, like volume control or changing a font color
Floating action buttons don’t contain app bar icons or status bar notifications. Don’t layer badges or other elements over a floating action button.
Use the circle-shaped icon consistently to enforce the primary action pattern across apps.
Don’t give the floating action button extra dimension.