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 component's appearance style. | Extract<"solid" | "outline-fill", Appearance> | "solid" |
| disabled | disabled | When true, prevents interaction and decreases the component's opacity. | boolean | false |
| icon | icon | Specifies an icon to display. | IconName | |
| iconFlipRtl | icon-flip-rtl | When true and the element direction is right-to-left ("rtl"), flips the components icon`. | boolean | false |
| kind | kind | Specifies the component's kind, which determines border and background styling. | Extract<"brand" | "danger" | "inverse" | "neutral", Kind> | "brand" |
| label | label | Specifies an accessible label for the component. | string | undefined | |
| loading | loading | When true, a busy indicator is displayed. | boolean | false |
| scale | scale | Specifies the size of the component. | Scale | "m" |
| text | text | Specifies text to accompany the component's icon. | string | undefined | |
| 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<this> |
| setFocus | Sets focus on the component. | setFocus(options?: FocusOptions): Promise<void> |