FAB

FAB, or Floating Action Button, is a stationary component that floats above other content in an interface.

Overview

FAB is commonly used anchored in a corner of the interface to be quickly accessible. Designed to be higher in the z-axis than most elements, use FAB sparingly and for critical actions. Avoid making FAB groups.

FAB is different than Button in that it has rounded corners and box-shadows and should be positioned above other content.

Usage

  • For actions that need visual prominence
  • For actions that need to be in a fixed position so content can flow beneath
  • For a single action on a busy background or map
  • For a prominent icon action that can exist without supporting text

Sample

Accessibility

Keyboard navigation

KeyFunction
SpacePresses the component.
EnterPresses the component.
TabMoves focus in and out of component.
Tab and ShiftMove focus in and out of component.

Writing and copy

Do FAB writing
Do use sentence case for FAB text.
Avoid FAB writing
Avoid using title case for FAB, and avoid using punctuation.
Do FAB actionable
Do make FAB text actionable.
Avoid FAB actionable
Avoid making FAB text unclear.
Do FAB consise
Do make FAB text concise.
Avoid FAB consise
Avoid making FAB text long or difficult to read.

API reference

Properties

Methods

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.