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.
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 to
|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 |
Updated 10 months ago
Did this page help you?