<?xml version="1.0" encoding="utf-8"?>

Floating action buttons

Floating action buttons Bad Practice
Floating action buttons Best Practice

The floating action button (FAB) is a prominent circular button fixed to screen edges or corners, used for positive, constructive actions like creating, adding, or sharing. While primarily an Android pattern, some Google apps like Drive and Gmail implement FABs on iOS.

Key FAB design principles:

  • Use one FAB per screen
  • Choose icons that clearly communicate the button's purpose
  • Reserve for positive actions, avoiding destructive ones like archive or delete

FAB can transition in three ways after tapping:

  • Speed dial: Reveals a stack of up to 6 related actions
  • Menu: Transforms into a menu with 3-6 items, disabling outside content
  • Transform: Morphs into larger surfaces that can span part or all of the screen.[1]

Pro Tip: Design FABs with a text label when the icon's meaning is not clear on its own.

Improve your UX & Product skills with interactive courses that actually work