Component reference
Anchor
Permalinks associated with article headings.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { Anchor, Prose } from "@pimolu/react";
export function DemoExample() {
return (
<Prose>
<p>
Give sections stable, shareable destinations without a separate
table of links.
</p>
<Anchor
id="preview-linked-section"
level={2}
>
A section worth sharing
</Anchor>
<p>
The permalink is a real link to this heading. This preview has
its own document so its fragment cannot collide with the
surrounding API reference.
</p>
</Prose>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Heading levels
level accepts 1 to 6 and defaults to 2. The visual scale changes, the heading role stays semantic.
Copy feedback
Activating the # link writes location.href#id to the clipboard and announces the result through a polite status. onCopy receives the exact URL.
Custom destination and label
href replaces the default #id destination without changing the copied URL. copyLabel names the link for assistive technology.
Usage
Use stable unique heading ids and meaningful destinations.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluAnchorProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
idRequired | string | — | Id of the heading and of its hash target. |
level | PimoluAnchorLevel | undefined | 2 | Heading level, 1 to 6. Defaults to 2. |
childrenRequired | ReactNode | — | Heading text. |
copyLabel | string | undefined | "Copy link to section" | Accessible name of the self-link. Defaults to "Copy link to section". |
href | string | undefined | "#<id>" | Destination of the self-link. Defaults to "#<id>". |
onCopy | ((value: string) => void) | undefined | — | Called with the copied URL after a successful clipboard write. |
className | string | undefined | — | Class applied to the wrapper that hosts the heading and the link. |
onChange | ChangeEventHandler<HTMLHeadingElement, Element> | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onClick | MouseEventHandler<HTMLHeadingElement> | undefined | — | Standard React/HTML attribute. |
idRequiredstringNo default extracted.
Id of the heading and of its hash target.
levelPimoluAnchorLevel | undefinedDefault: 2
Heading level, 1 to 6. Defaults to 2.
childrenRequiredReactNodeNo default extracted.
Heading text.
copyLabelstring | undefinedDefault: "Copy link to section"
Accessible name of the self-link. Defaults to "Copy link to section".
hrefstring | undefinedDefault: "#<id>"
Destination of the self-link. Defaults to "#<id>".
onCopy((value: string) => void) | undefinedNo default extracted.
Called with the copied URL after a successful clipboard write.
classNamestring | undefinedNo default extracted.
Class applied to the wrapper that hosts the heading and the link.
onChangeChangeEventHandler<HTMLHeadingElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onClickMouseEventHandler<HTMLHeadingElement> | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Keep the permalink keyboard reachable and provide a clear accessible name for icon-only links.