Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
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' > | 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.

Previous

Flex

Next

Grid