FloatingButtonThe Floating Button stays at the bottom of the screen, above other content, with an overlay to improve visibility.
It can appear with an animation, such as after a user interacts with a field, and is useful for highlighting key actions like continuing a process or submitting a form.
- Overview
- Dev
Usage ExamplesThe floating button can appear when the screen opens or after the user interacts with the screen or specific elements on it.
Button Options
The FloatingButton component can include up to two buttons: a main button and a secondary button. The main button can be set to full width using the fullWidth prop.
| Property | Default | Full Width |
|---|---|---|
| Main button |  |  |
| Main+secondary button |  |  |
Layout
When the secondaryButton prop is used, the layout can be configured as either vertical or horizontal. In the vertical layout, the secondary button is styled as a link button, and the main button can span the full width of the container by applying the fullWidth prop.
| Layout | Component |
|---|---|
| Horizontal |  |
| Vertical |  |
UsageCode Example
<FloatingButton visible={isVisible} button={{label: 'Approve', onPress: () => console.log('approved')}}}/>
INFO
This component support margin, background, color modifiers.
APIThis is the list of additional props for the component