Float - Chakra Ui — ContextQMD

Usage

Float requires a parent element with position: relative style applied.

jsx

import { Box, Float } from "@chakra-ui/react"

jsx

<Box position="relative">
  <Float>
    <div />
  </Float>
</Box>

Use the placement prop to position the element along the edges of the container.

Use the offsetX prop to offset the element along the x-axis.

Use the offsetY prop to offset the element along the y-axis.

Use the offset prop to offset the element along both axes.

Here's an example of composing a Float component with an Avatar component.