Skip to main content

FloatingButton

Hovering button with gradient background
(code example)

tip

This component support margin, background, color modifiers.

Usage#

<FloatingButton visible={isVisible} button={{label: 'Approve', onPress: () => console.log('approved')}}}/>

API#

bottomMargin#

The bottom margin of the button, or secondary button if passed
number

button#

Props for the Button component
ButtonProps

buttonLayout#

Button layout direction: vertical or horizontal
FloatingButtonLayouts

duration#

The duration of the button's animations (show/hide)
number

fullWidth#

Relevant to vertical layout only#

Whether the buttons get the container's full with
boolean

hideBackgroundOverlay#

Whether to show background overlay
boolean

secondaryButton#

Props for the secondary Button component
ButtonProps

testID#

Use testID.button for the main button or testID.secondaryButton for the secondary#

The test id for e2e tests
string

visible#

Whether the component is visible
boolean

withoutAnimation#

Whether to show/hide the button without animation
boolean