Skip to content
Paramanu v0.1.0-alpha.0

Float

Float positions a child element at a specific corner or edge of its relatively-positioned parent. Useful for badges and notification indicators.

Basic Usage

3
Icon
import { Float } from "@paramanu/primitives-react"


export default function App() {
return (
  <div style={{ position: "relative", width: 80, height: 80 }}>
    <Float placement="top-end">
      <span>3</span>
    </Float>
    <div>Icon</div>
  </div>
)
}
<div style="position: relative; width: 80px; height: 80px; background: #f8fafc; border: 1px solid #e2e8f0;">
<div class="pm-float pm-float--top-end">
  <span style="background: #ef4444; color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px;">3</span>
</div>
<div style="padding: 16px;">Icon</div>
</div>