Floating Action Button (FAB)

A floating action button (FAB) performs the primary or most common action on a screen.

Usage

A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center.

Use a FAB to represent the most common primary action on a screen.

Only use a FAB if it is the most suitable way to present a screen's primary action.

We recommend displaying only one FAB component per screen. Occasionally, two FABs can be used if they perform distinct yet equally important actions.

Color usage

An app's color scheme determines a FAB’s color fill, which should contrast with the area behind the FAB.

The Cegid Design System includes color usage for FAB components.

Primary color: apply the brand primary color to define the primary action on the interface.

Secondary color: apply the brand secondary color when the situation focuses on pertinent information, chatbot, or help.

White color: apply the white color on top of primary or colorful backgrounds.

Types

FABs come in two types: regular and extended.

Regular FAB

The regular FAB includes an icon in a container. It is available in two sizes : mini or large.

Extended FAB

The extended FAB includes a text label and an icon in a container.

Anatomy and content

The icon in the FAB should clearly illustrate the FAB’s action. It shouldn’t include notifications or actions found elsewhere on a screen.
The container is usually circular.
An extended FAB is wider and includes a text label. The text label should clearly and concisely describe the extended FAB’s action and the icon should be placed to the left of the text label.

Icon

Icons visually communicate the button’s action and help draw attention.
They should be placed on the leading side of the button, before the label’s text.

Container

Containers must inherit the radius defined in the design tokens.
Group internal elements together so that they scale together. Icons remain centered when button width increases.

Extended FAB

Text labels describe the action that will occur if a user clicks on the button. If a text label is not used, an icon should be present to signify what the button does.
Choose a button text that is short and meaningful.
Use a verb in the imperative for all action. For example: Save, Cancel, Edit.
Keep in mind that the text will often be longer in other languages.
The number of items can be added in parentheses. For example, Item (2).
Keep the text in lowercase to provide an ease of reading.
For maximum legibility, a text label should remain on a single line. So, keep it short, clear, and fully visible. Labels should not be truncated or take up multiple lines.

Loading button

The loading buttons can show loading state and disable interactions.

Behaviour and interaction

A floating action button (FAB) can trigger an action either on the current screen, or it can perform an action that creates a new screen.

A FAB promotes an important, constructive action such as:

Create
Favorite
Share
Start a process

States

A regular FAB can have one of the following states: default, hovered, focused, pressed, disabled or loading.

An extended FAB can have one of the following states: default, hovered, focused, pressed, disabled or loading.

A user interacts with the button by using a keyboard, touchscreen or screen reader. Use hover, pressed and focused states to provide button visuals feedbacks.

Use disabled state for actions that are not currently available, or temporarily unavailable. The surrounding interface should make it clear why the button is disabled and what needs to be done to enable it.

Responsiveness and density

The FAB button usually grows to fit the size of the text. In case of a fixed size for the button, the text truncates.

If the button is used in a responsive container or toolbar, it follows the responsive behavior defined for that element.

A FAB’s size and color should fit the design of the rest of the screen to make sure it stands out.