Float

Float is a component used to fix elements to the edges of a container.

Import

import { Float } from "@yamada-ui/react"

Copied!

Usage

Editable example

<Box bg={["blackAlpha.50", "whiteAlpha.50"]} boxSize="3xs" position="relative">
  <Float>
    <Center bg="primary" color="white" fontSize="sm" px="1.5" rounded="md">
      New
    </Center>
  </Float>
</Box>

Copied!

Change the Display Position

To change the display position, specify placement such as start-start or end-center.

Editable example

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

return (
  <Grid w="fit-content" gap="md" p="md" templateColumns="repeat(3, 1fr)">
    {placements.map((placement) => (
      <GridItem
        key={placement}
        bg={["blackAlpha.50", "whiteAlpha.50"]}
        boxSize="3xs"
        position="relative"
      >
        <Float placement={placement}>
          <Center
            bg="primary"
            color="white"
            fontSize="sm"
            px="1.5"
            rounded="md"
          >
            New
          </Center>
        </Float>
      </GridItem>
    ))}
  </Grid>
)

Copied!

Change the Offset

If the size of the element causes it to be positioned unexpectedly, adjust it using offset.

Editable example

<Grid gap="md" p="md" templateColumns="repeat(3, 1fr)">
  <GridItem
    bg={["blackAlpha.50", "whiteAlpha.50"]}
    boxSize="3xs"
    position="relative"
  >
    <Float offset="md" placement="start-start">
      <Center bg="primary" color="white" fontSize="sm" px="1.5" rounded="md">
        New
      </Center>
    </Float>
  </GridItem>

  <GridItem
    bg={["blackAlpha.50", "whiteAlpha.50"]}
    boxSize="3xs"
    position="relative"
  >
    <Float offset={["0", "md"]} placement="center-start">
      <Center bg="primary" color="white" fontSize="sm" px="1.5" rounded="md">
        New
      </Center>
    </Float>
  </GridItem>

  <GridItem
    bg={["blackAlpha.50", "whiteAlpha.50"]}
    boxSize="3xs"
    position="relative"
  >
    <Float offset={["md", "0"]} placement="end-end">
      <Center bg="primary" color="white" fontSize="sm" px="1.5" rounded="md">
        New
      </Center>
    </Float>
  </GridItem>
</Grid>

Copied!

Edit this page on GitHub

PreviousBleed NextSeparator