Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Float

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

SourceStorybook
3

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

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

PropDefaultType
placement 'top-end'
ConditionalValue< | 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start' | 'bottom-center' | 'top-center' | 'middle-center' | 'middle-end' | 'middle-start' >

The placement of the indicator

offsetX
SystemStyleObject['left']

The x offset of the indicator

offsetY
SystemStyleObject['top']

The y offset of the indicator

offset
SystemStyleObject['top']

The x and y offset of the indicator

Previous

Flex

Next

Grid