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
Bleed
Bleed is a component used to extend elements beyond the boundaries of a container.
Box
Box is the most abstract component on which all other components are built. By default, it renders a div element.
Center
Center is a component that aligns the child elements in the center within the component.
Container
Container is a component used as a general division element. By default, it renders the section element.
Flex
Flex is a component that sets flex to Box. Also, convenient style shorthand is available.
Grid
Grid is a component for managing grid layouts. It also comes with handy style shorthand.
Group
Group is a component that groups and attaches multiple elements together.
HStack
HStack is used to stack child elements horizontally.