Floating Toolbar

Last updated: 3.0.0 (04/07/2024) | Added: 3.0.0

The Floating Toolbar is the replacement to the OutlineContainer from Valence 2. It is largely similar, but uses the new useFloating hook to create a simpler mechanism for floating.

Usage

import { FloatingToolbar, Button } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <FloatingToolbar
            label="Toolbar label!"
            positionVertical="top"
            positionHorizontal="left"
            offset={5}
        >
            <Button>Button text</Button>
        </FloatingToolbar>
    )
}

Floating

The Floating Toolbar will use a fixed position by default, but this can be changed using the position prop. It can also be moved using the positionVertical, positionHorizontal and offset parameters.

The toolbar will also accept top, left, right, and bottom parameters for further customization.

The toolbar will automatically avoid unsafe areas (such as the notch and navigation unsafe areas on new iPhone models).

---

Props

Extends GenericFloatingLayoutProps & FlexProps.

Property	Type	Description
positionVertical	PositionVertical	The vertical position of this toolbar. Defaults to "top".
positionHorizontal	PositionHorizontal	The horizontal position of this toolbar. Defaults to "left".
offset	number	The offset of the toolbar from the edge of the screen. Defaults to 5.
label	string	A label to display below the toolbar.
labelProps	TextProps	Optional props to pass to the label component.
variant	FillVariant	The fill variant of the component. Defaults to "outlined".
radius	ComponentSize	The size class of the component's radius. Defaults to theme default.
shadow	boolean	Whether to render a shadow underneath the component. Defaults to false.