Affix
Pins content to the viewport: back-to-top buttons, floating help, save bars. Give it a top or bottom offset.
Example
Scroll this page: the help button below stays pinned to the bottom-right corner until you leave.
Tall filler so the page scrolls…
<Affix bottom="1rem" right="1rem">
<Button>Help</Button>
</Affix>Props
| Prop | Type | Default | Description |
|---|---|---|---|
top / bottom | string | - | Viewport offset; set one. |
zIndex | number | overlay token | Stacking override. |
Accessibility
- Fixed content can cover focus or actions on small screens: keep it small and dismissible where possible.
- The demo pins nothing over content on purpose.