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

1
<calcite-fab></calcite-fab>
v3.0.3

Accessibility

Keyboard navigation

KeyFunction
SpacePresses the component.
EnterPresses the component.
TabMoves focus in and out of component.
Tab and ShiftMove focus in and out of component.

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.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
appearanceappearanceSpecifies the appearance style of the component."outline-fill" | "solid""solid"
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
iconiconSpecifies an icon to display.string"plus"
iconFlipRtlicon-flip-rtlWhen true, the icon will be flipped when the element direction is right-to-left ("rtl").booleanfalse
kindkindSpecifies the kind of the component, which will apply to border and background."brand" | "danger" | "inverse" | "neutral""brand"
labellabelAccessible name for the component.string
loadingloadingWhen true, a busy indicator is displayed.booleanfalse
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
texttextSpecifies text to accompany the component's icon.string
textEnabledtext-enabledWhen true, displays the text value in the component.booleanfalse

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close