Floating Action Buttons

Custom component

Floating action buttons are a custom GEL component

Basic

A floating action button represents the primary action in an application and should be labeled with positive actions like Create, Share, and Navigate. Only one floating action button is recommended per screen to represent the most common action.

Avoid using floating action buttons for minor and destructive actions, such as:

  • Archive or trash
  • Nonspecific actions
  • Controls that should be in a toolbar, like volume control or changing a font color

Mini

40dp button size to use for screens widths 460dp or less.

Reference: https://material.io/guidelines/components/buttons-floating-action-button.html

Speed Dial

The floating action button can slide 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.

Read more ...

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 slides out one other choice – choose which action is most important. If you have more than six, users may have trouble reaching the furthest option.

The speed dial can open up or down with labels on the right or left side of the revealed actions.

Third-party Content Disclaimer