Skip to content

Buttons: Floating Action Button

A floating action button represents the primary action in an application. A floating action button is used for a promoted action. Shaped like a circled icon floating above the UI, it changes color upon focus and lifts upon selection.When pressed, it may contain more related actions.

Usage :

Only one floating action button is recommended per screen to represent the most common action.

Behavior :

It animates onto the screen as an expanding piece of material, by default.

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:

  1. Default size: For most use cases.
  2. Mini size: Only used to create visual continuity with other screen elements.

The button size should change from the default (56dp) to the mini size (40dp) when the screen width is 460dp or less.

The floating action button changes color on focus and lifts upon being selected.

Qualities :

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:

  1. Archive or Trash
  2. Nonspecific actions
  3. Alerts or errors
  4. Limited tasks like cutting text
  5. Controls that should be in a toolbar, like volume control or changing a font color.

Use the circle-shaped icon consistently to enforce the primary action pattern across apps. Don’t give the floating action button extra dimension.

Behavior :

The floating action button animates onto the screen as an expanding piece of material, by default.

Lateral screens :

A floating action button that spans multiple lateral screens (such as tabbed screens) should briefly disappear, then reappear if its action changes.

Lists :

Lists underneath floating action buttons should have enough padding beneath them so their content isn’t blocked by the button.

Tabbed screens :

On tabbed screens, the floating action button should not exit the screen in the same direction as the content.This prevents:

  1. Floating action buttons from appearing functional when they aren’t
  2. The perception that the floating action button is at the same the elevation as the content.

Transitions :

Transitions

The floating action button is a unique example of a primary use case in an app. Take advantage of its visibility to create delightful transitions for a primary UI element.

Common transitions include Trigger, Toolbar, Speed dial, Morphing , Full Screen.

Large Screens

Large screens

  1. A floating action button can attach to an extended app bar.
  2. A floating action button can be attached to a toolbar or structural element within a sheet (as long as it’s not blocking other elements).
  3. A floating action button can be attached to the edge of a sheet.
  4. Don’t associate floating action buttons with every element on a screen.