浮动

import { Box, Circle, Float } from "@chakra-ui/react"

export const FloatBasic = () => (
  <Box position="relative" w="80px" h="80px" bg="bg.emphasized">
    <Float>
      <Circle size="5" bg="red" color="white">
        3
      </Circle>
    </Float>
  </Box>
)

import { Box, Circle, Float, HStack, Stack } from "@chakra-ui/react"

export const FloatWithPlacements = () => (
  <HStack gap="14" wrap="wrap">
    {placements.map((placement) => (
      <Stack key={placement} gap="3">
        <p>{placement}</p>
        <Box position="relative" width="80px" height="80px" bg="bg.emphasized">
          <Float placement={placement}>
            <Circle size="5" bg="red" color="white">
              3
            </Circle>
          </Float>
        </Box>
      </Stack>
    ))}
  </HStack>
)

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

import { Box, Circle, Float } from "@chakra-ui/react"

export const FloatWithOffsetX = () => (
  <Box position="relative" w="80px" h="80px" bg="bg.emphasized">
    <Float offsetX="-4">
      <Circle size="5" bg="red" color="white">
        3
      </Circle>
    </Float>
  </Box>
)

import { Box, Circle, Float } from "@chakra-ui/react"

export const FloatWithOffsetY = () => (
  <Box position="relative" w="80px" h="80px" bg="bg.emphasized">
    <Float offsetY="-4">
      <Circle size="5" bg="red" color="white">
        3
      </Circle>
    </Float>
  </Box>
)

import { Box, Circle, Float } from "@chakra-ui/react"

export const FloatWithOffset = () => (
  <Box position="relative" w="80px" h="80px" bg="bg.emphasized">
    <Float offset="4">
      <Circle size="5" bg="red" color="white">
        3
      </Circle>
    </Float>
  </Box>
)

import { Avatar, Badge, Box, Float } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Box display="inline-block" pos="relative">
      <Avatar.Root size="lg" shape="rounded">
        <Avatar.Image src="https://bit.ly/dan-abramov" />
        <Avatar.Fallback />
      </Avatar.Root>
      <Float placement="bottom-end">
        <Badge size="sm" variant="solid" colorPalette="teal">
          New
        </Badge>
      </Float>
    </Box>
  )
}