Learn more about Mintlify
Enter your email to receive updates about new features and product releases.
Position an element at a fixed location on the viewport.
npm install @kuzenbo/core
import { Affix } from "@kuzenbo/core";
import { Button } from "@kuzenbo/core";
function Example() {
return (
<Affix position={{ bottom: 20, right: 20 }}>
<Button>Scroll to top</Button>
</Affix>
);
}
top, bottom, left, right as numbers (px) or strings.withinPortal is true.--kb-z-affix CSS variable.interface AffixPosition {
top?: number | string;
bottom?: number | string;
left?: number | string;
right?: number | string;
}
<Affix>
<Button>Fixed Button</Button>
</Affix>
<Affix position={{ top: 20, left: "50%" }} style={{ transform: "translateX(-50%)" }}>
<Alert>Important notification</Alert>
</Affix>
<Affix position={{ bottom: 40, left: 40 }}>
<Button variant="outline" size="lg">
Help
</Button>
</Affix>
<Affix position={{ top: 0, right: 0 }} zIndex={9999}>
<Button>Always on top</Button>
</Affix>
<div className="relative">
<Affix withinPortal={false} position={{ top: 10, right: 10 }}>
<Button size="sm">Relative to parent</Button>
</Affix>
</div>