The floating action button (FAB) has two sizes, medium and large.

Medium

Large

Medium: Only use for mobile devices.

• Location: The floating action button appears at the bottom right of the interface in which the action takes place.
• Elevation: Consistent with our stack order, the FAB has a level 2 elevation.

This button is always icon-only, and should never have a label used in its place.

Don'tuse a label to explain an action.

Douse icons for adding or sharing.

The floating action button (FAB) should only initiate an action. Never use it to complete a workflow.

Don'tuse the button to modify or save content.

Douse it to initiate something constructive.

Avoid using the FAB for bulk or destructive actions and instead place them elsewhere to avoid confusion.

Don'tdelete or remove content.

Doplace secondary actions in other areas of the interface.

Important, primary actions make use of our action color, which demands a lot of attention. It’s best to limit its use to just one.

Don'tuse for multiple actions in an interface.

Doreserve for the single, most important action.

The floating action button should remain fixed and not be placed haphazardly.

Don'tplace the button overtop meaningful content.

Dokeep its placement consistent to the bottom right.

As exciting as this button may be, avoid using it for anything other than mobile applications.

Don'tuse the floating action button for web-only workflows.

Douse it for Apple and Android devices.

See our full accessibility audit for more information about these results.