Get Started
Components
Styling
Theming

Float

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

import { Box, Circle, Float } from "styled-system/jsx";


export const FloatBasic = () => (
  <Box
    bgColor="page.surface.initial"
    h="80px"
    pos="relative"
    w="80px"
  >
    <Float>
      <Circle size="5" bg="danger.surface.initial" color="danger.text.initial">
        3
      </Circle>
    </Float>
  </Box>
)

Usage

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

import { Box, Float } from "styled-system/jsx";
<Box position="relative">
  <Float>
    <div />
  </Float>
</Box>

Examples

Placement

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

import { Box, Circle, Float, HStack, VStack } from "styled-system/jsx";
import { For } from "@cerberus/react";


export const FloatWithPlacements = () => (
  <HStack gap="xl" wrap="wrap">
    <For each={placements}>
      {(placement) => (
        <VStack key={placement} gap="3">
          <p>{placement}</p>
          <Box
            bgColor="page.surface.100"
            position="relative"
            height="80px"
            width="80px"
          >
            <Float placement={placement}>
              <Circle size="5" bg="red" color="white">
                3
              </Circle>
            </Float>
          </Box>
        </VStack>
      )}
    </For>
  </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 "styled-system/jsx";


export const FloatWithOffsetX = () => (
  <Box position="relative" w="80px" h="80px" bg="page.bg.initial">
    <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 "styled-system/jsx";


export const FloatWithOffsetY = () => (
  <Box position="relative" w="80px" h="80px" bg="page.bg.initial">
    <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 "styled-system/jsx";


export const FloatWithOffset = () => (
  <Box position="relative" w="80px" h="80px" bg="page.bg.initial">
    <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.

import { Box, Float } from "styled-system/jsx";
import { Avatar } from "@cerberus/react";


export const FloatWithAvatar = () => (
  <Box position="relative" w="80px" h="80px" bg="page.bg.initial">
    <Float>
      <Avatar
        src="https://avatars.githubusercontent.com/u/12345678?v=4"
      />
    </Float>
  </Box>
)

Props

PropTypeDescription
placementSystemStyleObject['float']The placement of the float element relative to its parent.
offsetXSystemStyleObject['marginInline']The offset along the x-axis.
offsetYSystemStyleObject['marginBlock']The offset along the y-axis.

On this page