Components

Floating action button

Also referred to as: FAB, Louncher screen quick actions

Overview

  • Available sinceMadrid
  • A11Y WCAG 2.1 AA
Figma link
Floating action button Figma component

Figma library with components for designing Native Mobile.

ServiceNow Docs link
FAB documentation

Implementation and administration guides

When to use

Use a FAB for the primary action that users should take on a screen, especially if it’s a frequently performed task. Starting a chat is a good example of effective FAB usage.

When not to use

Avoid using a FAB for actions that are only relevant in specific contexts and not frequently.

Anatomy

iOS FAB

iOS

Android FAB

Android

  1. Icon: Represent the action of the button, configurable by the admin from the icons font
  2. Container: Static frame containing the button

Design recommendations

Do

Use FABs only for immediate actions, not navigation. All icons should clearly communicate their intended function.

Don’t

Avoid using icons that do not clearly indicate the immediate action that will occur when clicked.

Do

Use the FAB for primary actions on the page.

Don’t

Overload the FAB with less important actions.

Do

Use the FAB for a primary action that the user performs frequently. In cases where only one action is configured in the quick actions menu, you can define a specific icon to be displayed.

Don’t

Overload the FAB with less significant options.

Alignment and positioning

The button is floating and aligned to the bottom right corner of the screen.

The FAB is floating above the screen, positioned in the bottom right corner, anchored 16 pixels from both the right and bottom edges. The button remains on the bottom of the page regardless of where a user scrolls, to remain easily accessible.

States

State Floating Action Button
Default fab_state_01@2x.png
Disabled fab_state_02@2x.png
Loaded state - on the calendar screen fab_state_03@2x.png

Interactions

Learn where the FAB appears in the app.

Launcher screen

The FAB can appear on the launch screen, guiding users to quick actions on the screen.

Calendar screen

The FAB can appear on the calendar screen, guiding users to quick actions such as adding a new event.

For example: a FAB leading to multiple actions on the calendar screen.