Float

Used to anchor an element to the edge of a container.

AI TipWant to skip the docs? Use the MCP Server

Usage

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

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

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

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

bottom-end

bottom-start

top-end

top-start

bottom-center

top-center

middle-center

middle-end

middle-start

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.

New

Prop	Default	Type
`placement`	`top-end`	`\| ConditionalValue< \| 'bottom-end' \| 'bottom-start' \| 'top-end' \| 'top-start' \| 'bottom-center' \| 'top-center' \| 'middle-center' \| 'middle-end' \| 'middle-start' > \| undefined` The placement of the indicator
`offsetX`		`SystemStyleObject['left'] \| undefined` The x offset of the indicator
`offsetY`		`SystemStyleObject['top'] \| undefined` The y offset of the indicator
`offset`		`SystemStyleObject['top'] \| undefined` The x and y offset of the indicator
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.