Float

Anchors content to an edge or corner of its positioned parent — badges, dots, close buttons.

Inbox

3 unread messages

import { Float, Center, Box, Text } from "astralis-ui";

export function FloatDemo() {
  return (
    /* Float anchors to the nearest positioned ancestor. */
    <Box position="relative" bg="panel" p="6" rounded="xl" border="normal" borderColor="subtle" maxW="3xs">
      <Text size="sm" weight="semibold">Inbox</Text>
      <Text size="xs" color="muted">3 unread messages</Text>
      <Float placement="top-end">
        <Center bg="red-solid" size="6" rounded="full">
          <Text size="xs" color="inverted">3</Text>
        </Center>
      </Float>
    </Box>
  );
}

Import#

import { Float } from "astralis-ui";

Usage#

Float is absolutely positioned, so its parent needs position="relative" (one Box prop away). The floated element is translated 50% past the anchor point so it centers on the edge — the badge-on-a-corner look, no manual offset math.

Placements#

Nine anchors: three per row across top, middle and bottom.

top-start

top-center

top-end

middle-start

middle-center

middle-end

bottom-start

bottom-center

bottom-end

import { Float, Box, Center, Text } from "astralis-ui";

const placements = [
  "top-start", "top-center", "top-end",
  "middle-start", "middle-center", "middle-end",
  "bottom-start", "bottom-center", "bottom-end",
] as const;

export function FloatPlacements() {
  return (
    <Box position="relative" bg="subtle" w="full" maxW="sm" h="40" rounded="xl">
      {placements.map((placement) => (
        <Float key={placement} placement={placement}>
          <Center bg="brand-solid" px="2" h="5" rounded="full">
            <Text size="xs" color="inverted">{placement}</Text>
          </Center>
        </Float>
      ))}
    </Box>
  );
}

Props#

Float extends Box and adds one prop:

Prop	Type	Default	Description
`placement`	`"top-start" \| "top-center" \| "top-end" \| "middle-start" \| "middle-center" \| "middle-end" \| "bottom-start" \| "bottom-center" \| "bottom-end"`	`"top-end"`	Which edge/corner of the positioned parent to anchor to.