Skip to main content

FloatingButton

Hovering button with gradient background
(code example)

tip

This component support margin, background, color modifiers.

Usage​

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

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