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
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 |
Styles
| Name | Description |
|---|---|
| --calcite-fab-background-color | Specifies the component's background color. |
| --calcite-fab-border-color | Specifies the component's border color. |
| --calcite-fab-corner-radius | Specifies the component's corner radius. |
| --calcite-fab-text-color | Specifies the component's text color. |
| --calcite-fab-loader-color | Specifies the component's loader color. |
| --calcite-fab-shadow | Specifies the component's shadow. |
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> |