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

return (
  <Grid gap="md" p="md" templateColumns="repeat(3, 1fr)">
    <For
      each={[
        "start-start",
        "start-center",
        "start-end",
        "center-start",
        "center-center",
        "center-end",
        "end-start",
        "end-center",
        "end-end",
      ]}
    >
      {(placement, index) => (
        <GridItem
          key={index}
          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>
      )}
    </For>
  </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)">
  <For
    each={[
      { placement: "start-start", offset: "md" },
      { placement: "center-start", offset: ["0", "md"] },
      { placement: "end-end", offset: ["md", "0"] },
    ]}
  >
    {({ placement, offset }, index) => (
      <GridItem
        bg={["blackAlpha.50", "whiteAlpha.50"]}
        boxSize="3xs"
        position="relative"
      >
        <Float
          key={index}
          offset={variant.offset}
          placement={variant.placement}
        >
          <Center
            bg="primary"
            color="white"
            fontSize="sm"
            px="1.5"
            rounded="md"
          >
            New
          </Center>
        </Float>
      </GridItem>
    )}
  </For>
</Grid>

Copied!

Edit this page on GitHub

PreviousBleed NextSeparator