Float
Float is a component used to fix elements to the edges of a container.
<Box bg="bg.panel" boxSize="3xs" position="relative" m="lg">
<Float
bg="bg.contrast"
color="fg.contrast"
fontSize="sm"
px="1.5"
rounded="l1"
>
New
</Float>
</Box>
Usage
import { Float } from "@yamada-ui/react"
import { Float } from "@/components/ui"
import { Float } from "@workspaces/ui"
<Float />
Change the Display Position
To change the display position, specify placement such as start-start or end-center.
const placements = [
"start-start",
"start-center",
"start-end",
"center-start",
"center-center",
"center-end",
"end-start",
"end-center",
"end-end",
] as const
return (
<Grid p="lg" gap="lg" templateColumns="repeat(3, 1fr)">
{placements.map((placement) => (
<GridItem
key={placement}
bg="bg.panel"
aspectRatio="1"
position="relative"
>
<Float
bg="bg.contrast"
color="fg.contrast"
fontSize="sm"
placement={placement}
px="1.5"
rounded="l2"
>
New
</Float>
</GridItem>
))}
</Grid>
)
Change the Offset
If the size of the element causes it to be positioned unexpectedly, adjust it using offset.
<Grid p="lg" gap="lg" templateColumns="repeat(3, 1fr)">
<GridItem bg="bg.panel" aspectRatio="1" position="relative">
<Float
bg="bg.contrast"
color="fg.contrast"
fontSize="sm"
offset="md"
placement="start-start"
px="1.5"
rounded="l2"
>
New
</Float>
</GridItem>
<GridItem bg="bg.panel" aspectRatio="1" position="relative">
<Float
bg="bg.contrast"
color="fg.contrast"
fontSize="sm"
offset={["0", "md"]}
placement="center-start"
px="1.5"
rounded="l2"
>
New
</Float>
</GridItem>
<GridItem bg="bg.panel" aspectRatio="1" position="relative">
<Float
bg="bg.contrast"
color="fg.contrast"
fontSize="sm"
offset={["md", "0"]}
placement="end-end"
px="1.5"
rounded="l2"
>
New
</Float>
</GridItem>
</Grid>
Props
Similar Components
ZStack
ZStack is used to stack child elements in depth.
VStack
VStack is used to stack child elements vertically.
Wrap
Wrap is a component that has wrap set on Flex. It inherits convenient style shorthand from Flex.
Stack
Stack is a component that groups elements and provides spacing between child elements.
Spacer
Spacer is a component used to add space between elements.
SimpleGrid
SimpleGrid is a component that makes Grid simpler and more user-friendly.
Separator
Separator is a component that represents a division between elements.
Group
Group is a component that groups and attaches multiple elements together.