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. | blue inverse neutral (default) red | |
disabled | disabled | When true, disabled prevents interaction. This state shows items with lower opacity/grayed. | true false | |
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. | true false | |
scale | scale | Specifies the size of the fab. | l m (default) s | |
text | text | Text that accompanies the FAB icon. | undefined | |
textEnabled | text-enabled | Indicates whether the text is displayed. | true false |
Methods
Name | Description | Signature | Returns |
---|---|---|---|
setFocus | Sets focus on the component. | setFocus() => Promise<void> | Promise<void> |