AnchorScroll
TypographySmooth-scroll anchor target with auto-registered TOC id.
Wrap a heading to get a hover-revealed # anchor link. Clicking copies the full URL with fragment to the clipboard. Announces the action via an ARIA live region.
Usage
import { AnchorScroll } from "nosible-ux"
export default function Example() {
return <AnchorScroll id="signal-methodology" level={2}>Signal methodology</AnchorScroll>
}Examples
Multiple heading levels
Accessibility
The # anchor button has aria-label="Copy link to section". A visually hidden live region announces "Link copied" after clicking.
Props
| Name | Type | Default | Description |
|---|---|---|---|
asChild | boolean | undefined | — | When true, renders the child element as the heading root instead of a native hN. The child must accept an `id` prop. |
children | ReactNode | — | |
className | string | undefined | — | |
id | string | — | DOM id applied to the heading element — also used to build the anchor URL. |
level | 1 | 2 | 3 | 4 | undefined | 2 | Heading level 1–4. |