Float

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

SourceReact version
3

Usage

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

import { Box, Float } from "chakra-ui-solid";
<Box position="relative">
  <Float>
    <div />
  </Float>
</Box>

Examples

Placement

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

bottom-end

3

bottom-start

3

top-end

3

top-start

3

bottom-center

3

top-center

3

middle-center

3

middle-end

3

middle-start

3

Offset X

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

3

Offset Y

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

3

Offset

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

3

Avatar

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

New

Props

FloatProps

Adds no prop of its own. It takes everything in FloatProperties, Omit<HTMLChakraProps<"div">, keyof FloatOptions> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

placement, offset, offsetX and offsetY are inherited rather than declared: they are Panda’s own float pattern’s properties, reused whole because that pattern computes exactly what Chakra’s Float computes — the same nine placements, the same offsetX ?? offset fallback, the same defaults.