FAB button

Marketing specificUpdated May 23, 2026

Other names: Floating action button

Description

The floating action button (FAB) contains the most frequently used action on a screen.
Typically used for initiating chat, which is considered the main feature, while all other actions are secondary.
Additionally, clicking the button can activate the multichannel support menu.
The FAB should be positioned in the bottom right corner of the screen, maintaining a 24px margin from both the right and bottom edges. For mobile screens, this margin should be reduced to 16px.

Warning

Accessibility alert (A11Y): The FAB button component does not always meet WCAG 2.2 standards due to interactive content overlaying other interactive content. This component is not consumed in product or Carbon. Please consider this when using it in your designs.> Note. This component should only be used in a marketing context. For example, in a Pendo guide or other GID use case.

Anatomy

Anatomy

Variations

Single-action FAB

Icon only

With label

Multi-action FAB

Default

Expanded

Best practices

Ensure to have only one floating action button or a grouped set per page.
Ensure the icons on the button clearly represent their function and are intuitively understood by users.
Not all screens require a floating action button. Use one only if it enhances the user's experience.
Consider hiding the floating action button when the user scrolls down the page.

Dos and don'ts

Technical example

This component is not currently available in Carbon.

It can be used in mockups and conceptual work.

If interested in implementing FAB button, please contact us.

Overview and triggers

The floating action button has multiple motion options, but just one trigger – a hover or tap on the button.

Motion can be applied to the following elements:

Motion Applied to	Resulting Change	Description
Button	Opacity	On click the button fades out
	Color	On hover the button’s background color changes to the hover state
Chat Window	Pos-Y	The chat window moves up subtlety on load. This reverses on close
	Opacity	The chat window fades in on click and fades out on close

Gestural considerations for mobile / tablet

There are no specific gestural motions in this instance.

Technical details of Motion

Motion Applied to	Property	Details	Duration	Easing
Button	Opacity	Fade out on click, in on chat window close	200ms (V Fast)	Standard In /Out
	Color	On hover inactive color to hover color	200ms (V Fast)	Standard In /Out
Chat Window	Pos-Y	4px move upwards	200ms (V Fast)	Standard In /Out
	Opacity	Fade out on click, in on chat window close	200ms (V Fast)	Standard In /Out

Date	Changes
April 2025	Added a callout message at the top of the page to highlight accessibility issues with the Button FAB component.
February 2025	This page is now a sub-page of the Button overview page. Content remains unchanged.
September 2024	New version created. Previous version archived in the frozen Web design system.