Import
import { Float } from 'styled-system/jsx'Usage
Used to anchor an element to the edge of a container.
Loading example...
Placement
Use the placement prop to position the element along the edges of the
container.
Loading example...
Offset X
Use the offsetX prop to offset the element along the x-axis.
Loading example...
Offset Y
Use the offsetY prop to offset the element along the y-axis.
Loading example...
Offset
Use the offset prop to offset the element along both axes.
Loading example...
Avatar
Here's an example of composing a Float component with an Avatar component.
Loading example...
Props
The Float component accepts the following utility props in addition to style and factory props:
| Prop | Type | Description |
|---|---|---|
placement | SystemStyleObject['float'] | The placement of the float element relative to its parent. |
offsetX | SystemStyleObject['marginInline'] | The offset along the x-axis. |
offsetY | SystemStyleObject['marginBlock'] | The offset along the y-axis. |
offset | SystemStyleObject['margin'] | The offset along both axes. |
