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
<calcite-fab></calcite-fab>
Accessibility
Keyboard navigation
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
API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
appearance | appearance | Specifies the appearance style of the component. | "outline-fill" | "solid" | "solid" |
disabled | disabled | When true , interaction is prevented and the component is displayed with lower opacity. | boolean | false |
icon | icon | Specifies an icon to display. | string | "plus" |
iconFlipRtl | icon-flip-rtl | When true , the icon will be flipped when the element direction is right-to-left ("rtl" ). | boolean | false |
kind | kind | Specifies the kind of the component, which will apply to border and background. | "brand" | "danger" | "inverse" | "neutral" | "brand" |
label | label | Accessible name for the component. | string | |
loading | loading | When true , a busy indicator is displayed. | boolean | false |
scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
text | text | Specifies text to accompany the component's icon. | string | |
textEnabled | text-enabled | When true , displays the text value in the component. | boolean | false |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
setFocus | Sets focus on the component. | setFocus(): Promise<void> |