FAB | Calcite Design System

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.

Sample

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

Accessibility

Key	Function
`Space`	Presses the component.
`Enter`	Presses the component.
`Tab`	Moves focus in and out of component.
`Tab` and `Shift`	Move focus in and out of component.

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

Property	Attribute	Description	Type	Default
appearance	appearance	Specifies the component's appearance style.	`Extract<"solid" \| "outline-fill", Appearance>`	`"solid"`
disabled	disabled	When `true`, prevents interaction and decreases the component's opacity.	`boolean`	`false`
icon	icon	Specifies an icon to display.	`IconName`
iconFlipRtl	icon-flip-rtl	When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s` icon`.	`boolean`	`false`
kind	kind	Specifies the component's kind, which determines border and background styling.	`Extract<"brand" \| "danger" \| "inverse" \| "neutral", Kind>`	`"brand"`
label	label	Specifies an accessible label for the component.	`string \| undefined`
loading	loading	When `true`, a busy indicator is displayed.	`boolean`	`false`
scale	scale	Specifies the size of the component.	`Scale`	`"m"`
text	text	Specifies text to accompany the component's icon.	`string \| undefined`
textEnabled	text-enabled	When `true`, displays the `text` value in the component.	`boolean`	`false`

Styles

Name	Description
--calcite-fab-background-color	Specifies the component's background color.
--calcite-fab-border-color	Specifies the component's border color.
--calcite-fab-corner-radius	Specifies the component's corner radius.
--calcite-fab-text-color	Specifies the component's text color.
--calcite-fab-loader-color	Specifies the component's loader color.
--calcite-fab-shadow	Specifies the component's shadow.

Methods

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`
setFocus	Sets focus on the component.	`setFocus(options?: FocusOptions): Promise<void>`