Float

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

Source: packages/chakra-ui-solid/src/components/floatChakra UI ↗

import { Box, Circle, Float } from "chakra-ui-solid";

export default function FloatBasic() {
  return (
    <Box position="relative" w="80px" h="80px" bg="bg.emphasized">
      <Float>
        <Circle size="5" bg="red.solid" color="red.contrast">
          3
        </Circle>
      </Float>
    </Box>
  );
}

Usage

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

import { Box, Float } from "chakra-ui-solid";

<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

bottom-start

top-end

top-start

bottom-center

top-center

middle-center

middle-end

middle-start

import type { JSX } from "@solidjs/web";
import { Box, Circle, Float, HStack, Stack } from "chakra-ui-solid";

/**
 * The nine written out, where the React version maps over a list.
 *
 * `placement` decides four insets and a `translate`, and Panda generates those rules by reading
 * this file — so a placement it can only know at runtime reaches the element as a class with no
 * rule, and the badge lands wherever static position puts it (`CLAUDE.md`, *The hazard*). The
 * scaffolding around each one is a component; the `<Float>` line itself is not, because that is the
 * line the extractor has to be able to read.
 */
export default function FloatWithPlacements() {
  return (
    <HStack gap="14" wrap="wrap">
      <PlacementBox label="bottom-end">
        <Float placement="bottom-end">
          <Count />
        </Float>
      </PlacementBox>

      <PlacementBox label="bottom-start">
        <Float placement="bottom-start">
          <Count />
        </Float>
      </PlacementBox>

      <PlacementBox label="top-end">
        <Float placement="top-end">
          <Count />
        </Float>
      </PlacementBox>

      <PlacementBox label="top-start">
        <Float placement="top-start">
          <Count />
        </Float>
      </PlacementBox>

      <PlacementBox label="bottom-center">
        <Float placement="bottom-center">
          <Count />
        </Float>
      </PlacementBox>

      <PlacementBox label="top-center">
        <Float placement="top-center">
          <Count />
        </Float>
      </PlacementBox>

      <PlacementBox label="middle-center">
        <Float placement="middle-center">
          <Count />
        </Float>
      </PlacementBox>

      <PlacementBox label="middle-end">
        <Float placement="middle-end">
          <Count />
        </Float>
      </PlacementBox>

      <PlacementBox label="middle-start">
        <Float placement="middle-start">
          <Count />
        </Float>
      </PlacementBox>
    </HStack>
  );
}

/** The positioned parent every Float needs, plus the name of the placement being shown. */
function PlacementBox(props: { label: string; children: JSX.Element }) {
  return (
    <Stack gap="3">
      <Box as="p">{props.label}</Box>
      <Box position="relative" width="80px" height="80px" bg="bg.emphasized">
        {props.children}
      </Box>
    </Stack>
  );
}

const Count = () => (
  <Circle size="5" bg="red.solid" color="red.contrast">
    3
  </Circle>
);

Offset X

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

import { Box, Circle, Float } from "chakra-ui-solid";

export default function FloatWithOffsetX() {
  return (
    <Box position="relative" w="80px" h="80px" bg="bg.emphasized">
      <Float offsetX="-4">
        <Circle size="5" bg="red.solid" color="red.contrast">
          3
        </Circle>
      </Float>
    </Box>
  );
}

Offset Y

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

import { Box, Circle, Float } from "chakra-ui-solid";

export default function FloatWithOffsetY() {
  return (
    <Box position="relative" w="80px" h="80px" bg="bg.emphasized">
      <Float offsetY="-4">
        <Circle size="5" bg="red.solid" color="red.contrast">
          3
        </Circle>
      </Float>
    </Box>
  );
}

Offset

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

import { Box, Circle, Float } from "chakra-ui-solid";

export default function FloatWithOffset() {
  return (
    <Box position="relative" w="80px" h="80px" bg="bg.emphasized">
      <Float offset="4">
        <Circle size="5" bg="red.solid" color="red.contrast">
          3
        </Circle>
      </Float>
    </Box>
  );
}

Avatar

Here’s an example of composing a Float component with an avatar.

New

import { Box, Circle, Float } from "chakra-ui-solid";

export default function FloatWithAvatar() {
  return (
    <Box display="inline-block" pos="relative">
      <Circle size="12" bg="bg.emphasized" color="fg" fontWeight="medium">
        FS
      </Circle>
      <Float placement="bottom-end">
        <Box
          bg="teal.subtle"
          color="teal.fg"
          px="2"
          py="0.5"
          borderRadius="l1"
          fontSize="xs"
          fontWeight="medium"
        >
          New
        </Box>
      </Float>
    </Box>
  );
}

Chakra’s version composes Avatar and Badge; neither has shipped here yet, so this is Circle and a Box standing in for them. What the example is about — a Float anchored to the corner of a positioned parent — is unchanged.

Props

Prop	Default	Type
`as`	—	`ValidComponent` The element or component to render instead of the default one.
`render`	—	`(props) => JSX.Element` Render an element of your own, given the computed props. A function, never an element — Solid has no `cloneElement`, so an element could only be rendered with its props dropped.
`unstyled`	—	`boolean` Drop the component's own styles. Style props and the `css` prop still apply — the opt-out is of the theme, not of styling.

Plus everything it inherits: Omit<HTMLChakraProps<"div">, keyof FloatOptions>. Those are the whole style-prop surface and the DOM attributes of the element it renders — several hundred names, listed here as their sources rather than expanded.

placement, offset, offsetX and offsetY are inherited rather than declared: they are Panda’s own float pattern’s properties, reused whole because that pattern computes exactly what Chakra’s Float computes — the same nine placements, the same offsetX ?? offset fallback, the same defaults.