---
title: Float
description: "`Float` is a component used to fix elements to the edges of a container."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/float/float.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/float
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-float--basic
---

# Float

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

```tsx
<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

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

```tsx
import { Float } from "@/components/ui"
```

```tsx
import { Float } from "@workspaces/ui"
```

```tsx
<Float />
```

### Change the Display Position

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

```tsx
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`.

```tsx
<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

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `offset`      | -       | `"-0.5" \| "-1.5" \| "-1" \| "-10" \| "-11" \| "-12" \| "-13" \| "-14" \| "-15" \| "-16" ...`                             | Changes position offset.                   |

## Similar Components

- [Bleed](https://yamada-ui.com/docs/components/bleed.md): `Bleed` is a component used to extend elements beyond the boundaries of a container.
- [Box](https://yamada-ui.com/docs/components/box.md): `Box` is the most abstract component on which all other components are built. By default, it renders a `div` element.
- [Center](https://yamada-ui.com/docs/components/center.md): `Center` is a component that aligns the child elements in the center within the component.
- [Container](https://yamada-ui.com/docs/components/container.md): `Container` is a component used as a general division element. By default, it renders the `section` element.
- [Flex](https://yamada-ui.com/docs/components/flex.md): `Flex` is a component that sets `flex` to `Box`. Also, convenient style shorthand is available.
- [Grid](https://yamada-ui.com/docs/components/grid.md): `Grid` is a component for managing grid layouts. It also comes with handy style shorthand.
- [Group](https://yamada-ui.com/docs/components/group.md): `Group` is a component that groups and attaches multiple elements together.
- [HStack](https://yamada-ui.com/docs/components/h-stack.md): `HStack` is used to stack child elements horizontally.

## Used By Components & Hooks

- [Indicator](https://yamada-ui.com/docs/components/indicator.md): `Indicator` is a component that displays at the corner of elements such as avatars.