FAB

Calcite 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 used for Level 2 interactions.

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

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

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.

Accessibility

Keyboard navigation

KeyFunction
SpacePress button
TabMove focus in and out of component
Tab and ShiftMove focus in and out of component

API reference

calcite-fab
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
appearanceappearance

Used to set the button's appearance. Default is outline.

typedChoose from a set of typed values
outline (default)solid
colorcolor

Used to set the button's color. Default is light.

typedChoose from a set of typed values
blueinverseneutral (default)red
disableddisabled

When true, disabled prevents interaction. This state shows items with lower opacity/grayed.

booleanA boolean property should be present, or not
truefalse
iconicon

The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.

optional
iconAccepts a Calcite UI Icon string
labellabel

Label of the FAB, exposed on hover when textEnabled is false. If no label is provided, the label inherits what's provided for the `text` prop.

optional
stringA custom string
undefined
loadingloading

When true, content is waiting to be loaded. This state shows a busy indicator.

booleanA boolean property should be present, or not
truefalse
scalescale

Specifies the size of the fab.

typedChoose from a set of typed values
lm (default)s
texttext

Text that accompanies the FAB icon.

optional
stringA custom string
undefined
textEnabledtext-enabled

Indicates whether the text is displayed.

booleanA boolean property should be present, or not
truefalse

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the component.

setFocus() => Promise<void>Promise<void>

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