Float
Positions a child over a corner or edge of its positioned ancestor.
Usage
import { Float } from "@kanzo-tech/ui";<div className="relative">
{/* … */}
<Float placement="top-end">
<Badge>3</Badge>
</Float>
</div>Float positions itself against the nearest positioned ancestor. Give that ancestor
position: relative (Tailwind's relative) or the float escapes to the viewport.
Float is the primitive under corner adornments — a notification count on an icon, a status dot
on an avatar, a "New" tag on a card. It is pure box model (no client boundary), and it pins the
child; the offset and the child are yours — a corner status tag is
Float plus a Badge, not a component.
On a card corner
Pin a "New" / "Coming soon" tag to a card. The card is the positioned ancestor, and a negative offset lets the badge straddle the edge.
Standing bounties
Placements
Nine cells of a 3×3 grid. The vertical middle is middle-* (not center-*); the horizontal
centre is *-center. Insets are logical, so every placement mirrors correctly under RTL.
API Reference
Float
Renders a div.
| Prop | Type | Default |
|---|---|---|
placement | "top-start" | "top-center" | "top-end" | "middle-start" | "middle-center" | "middle-end" | "bottom-start" | "bottom-center" | "bottom-end" | "top-end" |
FloatProps is exported, so a wrapper can take the same props without restating them.