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.

Sizes

Default: 56 x 56dp
Mini: 40 x 40dp

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 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 should be placed 16dp minimum from the edge on mobile and 24dp minimum on tablet/desktop.

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

Floating action button gaining focus

Floating action button 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.

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:

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.

Behavior

The floating action button animates onto the screen as an expanding piece of material, by default. The icon within it may be animated.

Floating action buttons may move differently than other UI elements because of their relative importance.

Examples of moving floating action buttons

Lateral screens

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

The button should stay on screen if its action remains the same across screens (and translate to a new position, if necessary.)

Lists

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

Do.

Tabbed screens

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

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

Don’t.

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, and Morphing. This is not an exhaustive list. Floating action buttons are designed to be flexible. Experiment with transitions that best suit your app and the screens on which the button sits.

Trigger

The floating action button can simply trigger an action or navigate somewhere. The animation of the touch ripple expands outwards as the force that causes changes to the UI.

A floating action button can simply trigger an action.

A floating action button recentering a map view

Apps typically use a single floating action button. However, this example uses two floating action buttons because they perform equally important yet distinct actions.

Toolbar

The floating action button can transform into a toolbar upon press or from a toolbar upon scroll. The toolbar can contain related actions, text and search fields, or any other items that would be useful at hand.

A floating action button transforming into a toolbar

A floating action button transforming into a toolbar.

A toolbar that disappears on scroll is particularly useful for screens where the full toolbar is needed upon initial entry or while at the top or bottom of a long list. This saves screen real estate when the user has signaled through scrolling that they’re interested in looking at the main content.

A toolbar transforming into a floating action button upon scroll

If a floating action button morphs into a toolbar, that toolbar should contain related actions.

Speed dial

The floating action button can fling out related actions upon press. The button should remain on screen after the menu is invoked. Tapping in the same spot should either activate the most commonly used action or close the open menu.

A floating action button flinging out related actions

The floating action button can transform into a single sheet of material which contains all the actions.

A floating action button transforming into a single sheet of material

As a general rule, have at least three options upon press but not more than six, including the original floating action button target. If you have two options – i.e. your floating action button only flings out one other choice – choose which action is most important. If you have more than six, users may have trouble reaching the furthest option.

Reduce decision fatigue by giving users the best, most distinct, and fewest options.

Don’t put overflow menus in the floating action button actions. There should be at most two taps from the initial screen to get to the intended destination.

Put overflow actions in the overflow menu in toolbars, not in floating action buttons.

If the hallmark of the app is adding file types, a floating action button can transform into related actions after it is first touched. However, if the actions that appear are unrelated to the button, place the actions into an overflow menu.

A floating action button can contain a list of contacts. The list shouldn’t contain unrelated actions.

Morph

The floating action button can transform into sheets of material that are part of the app structure. This dramatic transformation accentuates the action the button enables.

When morphing the floating action button, transition between starting and ending positions in a logical way. For example, do not pass through other sheets of material.

The morph animation should be reversible and transform the new sheet of material back into the floating action button.

A floating action button can morph into a sheet of material that is part of the app structure.

Full screen

The floating action button can transform into a new sheet of material that spans the entire screen.

This type of dramatic transformation is typically associated with creating new content. As a result, it does not tend to have an method of undoing the transformation or a reversible animation.