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
Writing and copy
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Space | Press button |
Tab | Move focus in and out of component |
Tab and Shift | Move focus in and out of component |
API reference
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| appearance | appearance | Used to set the button's appearance. Default is outline. | outline (default)solid | |
| color | color | Used to set the button's color. Default is light. | blueinverseneutral (default)red | |
| disabled | disabled | When true, disabled prevents interaction. This state shows items with lower opacity/grayed. | truefalse | |
| icon | icon | 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/. | ||
| label | label | 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. | undefined | |
| loading | loading | When true, content is waiting to be loaded. This state shows a busy indicator. | truefalse | |
| scale | scale | Specifies the size of the fab. | lm (default)s | |
| text | text | Text that accompanies the FAB icon. | undefined | |
| textEnabled | text-enabled | Indicates whether the text is displayed. | truefalse |
Methods
| Name | Description | Signature | Returns |
|---|---|---|---|
| setFocus | Sets focus on the component. | setFocus() => Promise<void> | Promise<void> |