Float

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

Panda

import { Float } from 'styled-system/jsx';

Usage

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

Placement

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

Offset X

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

Offset Y

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

Offset

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

Avatar

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

Props

The Float component accepts any style properties along with the following props:

Prop	Type	Description
`placement`	`SystemStyleObject['float']`	The placement of the float element relative to its parent.
`offsetX`	`SystemStyleObject['marginInline']`	The offset along the x-axis.
`offsetY`	`SystemStyleObject['marginBlock']`	The offset along the y-axis.
`offset`	`SystemStyleObject['margin']`	The offset along both axes.

On this page

Edit this page on Github

Cerberus Design System | Docs

3

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

export function BasicDemo() {
  return (
    <Box position="relative" w="80px" h="80px" bg="page.surface.100">
      <Float>
        <Circle size="5" bg="red" color="white" textStyle="label-sm">
          3
        </Circle>
      </Float>
    </Box>
  )
}

3

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

export function OffsetYDemo() {
  return (
    <Box position="relative" w="80px" h="80px" bg="page.surface.100">
      <Float offsetY="-4">
        <Circle size="5" bg="red" color="white" textStyle="label-sm">
          3
        </Circle>
      </Float>
    </Box>
  )
}

3

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

export function OffsetDemo() {
  return (
    <Box position="relative" w="80px" h="80px" bg="page.surface.100">
      <Float offset="-4">
        <Circle size="5" bg="red" color="white" textStyle="label-sm">
          3
        </Circle>
      </Float>
    </Box>
  )
}

Listening to...

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

export function AvatarDemo() {
  return (
    <Box position="relative">
      <Avatar
        alt="User Avatar"
        src="https://avatars.githubusercontent.com/u/12345678?v=4"
        size="xl"
      />
      <Float placement="bottom-center" offsetY="-4px">
        <Tag>Listening to...</Tag>
      </Float>
    </Box>
  )
}

3

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

export function OffsetXDemo() {
  return (
    <Box position="relative" w="80px" h="80px" bg="page.surface.100">
      <Float offsetX="-4">
        <Circle size="5" bg="red" color="white" textStyle="label-sm">
          3
        </Circle>
      </Float>
    </Box>
  )
}

import { Text } from '@cerberus/react'
import {
  Box,
  Circle,
  Float,
  FloatProps,
  HStack,
  VStack,
} from 'styled-system/jsx'

export function PlacementsDemo() {
  const placements = [
    'bottom-end',
    'bottom-start',
    'top-end',
    'top-start',
    'bottom-center',
    'top-center',
    'middle-center',
    'middle-end',
    'middle-start',
  ] as const

  return (
    <HStack gap="14" flexWrap="wrap" px="md" pt="md" w="full">
      {placements.map((placement) => (
        <VStack key={placement} gap="sm" justify="center" pos="relative">
          <Box
            position="relative"
            width="80px"
            height="80px"
            bg="page.surface.100"
          >
            <MatchFloat placement={placement}>
              <Circle size="5" bg="red" color="white" textStyle="label-sm">
                3
              </Circle>
            </MatchFloat>
          </Box>
          <Text as="small" textStyle="label-sm">
            {placement}
          </Text>
        </VStack>
      ))}
    </HStack>
  )
}

function MatchFloat(props: FloatProps) {
  switch (props.placement) {
    case 'bottom-end':
      return <Float placement="bottom-end" {...props} />
    case 'bottom-start':
      return <Float placement="bottom-start" {...props} />
    case 'top-end':
      return <Float placement="top-end" {...props} />
    case 'top-start':
      return <Float placement="top-start" {...props} />
    case 'bottom-center':
      return <Float placement="bottom-center" {...props} />
    case 'top-center':
      return <Float placement="top-center" {...props} />
    case 'middle-center':
      return <Float placement="middle-center" {...props} />
    case 'middle-end':
      return <Float placement="middle-end" {...props} />
    case 'middle-start':
      return <Float placement="middle-start" {...props} />
    default:
      return null
  }
}