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

```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.                   |
| `placement`   | `"start-end"` | `"center-center" \| "center-end" \| "center-start" \| "center" \| "end-center" \| "end-end" \| "end-start" \| "end" \| "start-center" \| "start-end" ...` | The placement of the float.                |