A FAB, or Floating Action Button, is a circular icon button that hovers the content of the screen. It represents the primary action of the screen.
Adding a FAB button
To add the FAB on the screen:
- Select the FAB component from the Components drawer. You can open the list of components by clicking the
+button next to Components. - Select the added component in the Components tree.
- Go to the Styles tab (first tab) in Properties Panel.
- Under Position, select the property Absolute and then add the value for right and bottom.
- By default, the background color is set to Primary, the icon to a plus
+and icon size to32.
Configuration Properties
| Property | Description |
|---|---|
| Component Name | To alter the name of the component. The name is reflected in the Components tree. Defaults to FAB. |
| Loading | Display a loading indicator in the button in lieu of the icon. |
| Disabled | Removes button functionality and grays out the label and icon. |
| Icon | Allows you to select an icon from the icon picker to be displayed on the FAB. |
| Icon color | To set the color of the icon. |
| Background color | To set the color of the FAB button. |
| Icon Size | To set the size of the icon. Defaults to 32. |
Updated 7 months ago
Did this page help you?