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