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

Writing and copy

Do use sentence case for FAB text.

Avoid using title case for FAB, and avoid using punctuation.

Do make FAB text actionable.

Avoid making FAB text unclear.

Do make FAB text concise.

Avoid making FAB text long or difficult to read.

API reference

Properties

Methods