DocsBlog

  • 1.6.0

  • Day

    Night

    Preview

    Switch mode

  • Cerberus

    Acheron

    Elysium

    Oceanus

Get Started
Components
Data Grid
Signals
Styling
Theming

Concepts

OverviewCompositionCerberus ContextTesting

Layout

Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridGroupLink OverlayScrollableStackWrap

Components

AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMarqueeNotificationsNumber InputPaginationPin InputPopoverProgressPrompt ModalRadioRatingSelectSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

Utilities

Client OnlyDownload TriggerEnvironmentFeature FlagsFocus TrapForFormat ByteFormat NumberFormat Relative TimeFrameHighlightJSON Tree ViewLocaleLocal StoragePortalPresenceShowsplitPropsTheme

On this page

Loading...

Loading...

Loading...

Loading...

Float

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

  • Panda

Usage

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

Placement

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

placement

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:

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.
offsetSystemStyleObject['margin']The offset along both axes.
import { Float } from 'styled-system/jsx';
Float

On this page

  • Usage
  • Placement
  • Offset X
  • Offset Y
  • Offset
  • Avatar
  • Props
  • Edit this page on Github
3
Copy
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
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
Copy
3
Copy
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>
  )
}
3
Copy
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
Copy
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>
  )
}
User Avatar
Listening to...
Copy
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>
  )
}

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
  }
}