Float

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

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

export const FloatBasic = () => (
  <Box position="relative" w="80px" h="80px" bg="bg.emphasized">
    <Float>
      <Circle size="5" bg="red" color="white">
        3
      </Circle>
    </Float>
  </Box>
)

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>

Examples

Placement

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

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

export const FloatWithPlacements = () => (
  <HStack gap="14" wrap="wrap">
    {placements.map((placement) => (
      <Stack key={placement} gap="3">
        <p>{placement}</p>
        <Box position="relative" width="80px" height="80px" bg="bg.emphasized">
          <Float placement={placement}>
            <Circle size="5" bg="red" color="white">
              3
            </Circle>
          </Float>
        </Box>
      </Stack>
    ))}
  </HStack>
)

const placements = [
  "bottom-end",
  "bottom-start",
  "top-end",
  "top-start",
  "bottom-center",
  "top-center",
  "middle-center",
  "middle-end",
  "middle-start",
] as const

Offset X

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

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

export const FloatWithOffsetX = () => (
  <Box position="relative" w="80px" h="80px" bg="bg.emphasized">
    <Float offsetX="-4">
      <Circle size="5" bg="red" color="white">
        3
      </Circle>
    </Float>
  </Box>
)

Offset Y

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

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

export const FloatWithOffsetY = () => (
  <Box position="relative" w="80px" h="80px" bg="bg.emphasized">
    <Float offsetY="-4">
      <Circle size="5" bg="red" color="white">
        3
      </Circle>
    </Float>
  </Box>
)

Offset

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

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

export const FloatWithOffset = () => (
  <Box position="relative" w="80px" h="80px" bg="bg.emphasized">
    <Float offset="4">
      <Circle size="5" bg="red" color="white">
        3
      </Circle>
    </Float>
  </Box>
)

Avatar

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

New

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

const Demo = () => {
  return (
    <Box display="inline-block" pos="relative">
      <Avatar.Root size="lg" shape="rounded">
        <Avatar.Image src="https://bit.ly/dan-abramov" />
        <Avatar.Fallback />
      </Avatar.Root>
      <Float placement="bottom-end">
        <Badge size="sm" variant="solid" colorPalette="teal">
          New
        </Badge>
      </Float>
    </Box>
  )
}

Props

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.

Flex

Grid