Floating action button (FAB)

Floating action buttons place the most important actions on the screen a tap away.

Must include:

• Icon with no label
• Background color

Template support

FABs are supported by the Grid template and the List template.

Guidance

Each Grid or List template is limited to a single FAB, which appears in the lower right corner.

Use a FAB for the most important action on the screen. Be sure that the icon is easy to understand, since there is no text label. In the prior example, the plus sign conveys the idea of adding another destination.

Note: Do not use a FAB and an action strip at the same time. Action strips are best when you want to include a label for the action. However, if the List or Grid template is embedded in a Tab template, an action strip is not allowed, so use a FAB.