Components

Component

Float

Places floating content inside a positioned frame.

ReactReact Native4 props
PreviewReact
top-start
top-end
bottom-end
bottom-start

middle-center

Imports

import { Box, Float } from "@hozorica/hods-react";
import { Box, Float } from "@hozorica/hods-react-native";

Props

PropTypeDescription
placement *top-start | top-center | ...Nine-point placement value.
offsetXDimensionToken | number | 0Horizontal offset.
offsetYDimensionToken | number | 0Vertical offset.
zIndexnumber | stringStacking order.

Platform Support

React

Absolute positioning with transform centering.

React Native

Absolute wrapper positioning; middle placements depend on parent size.

Usage

<Box position="relative"><Float placement="bottom-end" offsetX="x3" offsetY="x3"><ActionButton>Save</ActionButton></Float></Box>

Notes

  • Parent must be positioned relative on web.
  • Float is exported from the package root; there is no layout subpath export.
  • RN middle placement uses a full-size absolute wrapper.