Affix

Layout

Fixed-position container pinned to a viewport corner.

Renders children in a position: fixed portal attached to document.body. Use for floating buttons, chat widgets, or persistent HUD controls that stay visible during scroll.

Usage

import { Affix } from "nosible-ux"
import { Button } from "nosible-ux"

export default function Example() {
  return (
    <Affix position={{ bottom: 24, right: 24 }}>
      <Button intent="primary">New signal alert</Button>
    </Affix>
  )
}

Examples

Bottom-right floating button

Accessibility

The portal moves the element to the DOM root — ensure focus order still makes sense. Affix itself adds no ARIA attributes.

Props

Name	Type	Default	Description
`children`	`ReactNode`	—	Content to render in the fixed layer.
`className`	`string \| undefined`	—	Optional extra className applied to the inner wrapper div.
`position`	`AffixPosition \| undefined`	—	Pixel offsets from each viewport edge. Omit an edge to leave it unset (CSS default: `auto`).
`zIndex`	`number \| undefined`	—	`z-index` for the fixed wrapper. Default: `200`. Use higher values (e.g. `1000`) to clear modal z-layers.

← All Components Getting Started →