- Label: Specifies the text to be displayed on the button.
- Icon: Allows you to select an icon to accompany the button.
- Tooltip: A description shown when the user hovers over the button.
- Position: Determines where on the screen the button will be fixed:
- top left: Fixed to the top-left corner.
- top right: Fixed to the top-right corner.
- bottom left: Fixed to the bottom-left corner.
- bottom right: Fixed to the bottom-right corner.
- offsetX: Specifies the horizontal spacing (in pixels) from the left or right edge.
- offsetY: Specifies the vertical spacing (in pixels) from the top or bottom edge.
The offsetX and offsetY values are used to set the distance from the selected edge. For example:
- If bottom right is selected:
- offsetX: distance from the right edge
- offsetY: distance from the bottom edge
- If top left is selected:
- offsetX: distance from the left edge
- offsetY: distance from the top edge
Using FloatButton with FloatPanel
FloatButton is commonly used to trigger a FloatPanel.
The FloatPanel is opened using a Navigate action, defined as follows:
- Click +ADD ACTION → onClick → assign the Navigate action.
- Set the target panel type to FloatPanel.
- The FloatPanel serves as an alternative to Drawer and Modal components.
Use Cases
- A “+” button for adding new records
- Opening a help or support panel
- Launching a feedback or comment form
- Displaying additional settings or operations
FloatButton is an ideal solution for applications aiming to keep the user interface clean while providing quick access to actions.
