Skip to content
import { Anchor } from "@stratakit/bricks";
// OR
import * as Anchor from "@stratakit/bricks/Anchor";
Base element:<a>

A styled anchor element, typically used for navigating to a different location.

Type:"neutral" | "accent" | undefined(optional)
Default:"neutral"
Base element:<a>

A styled anchor element, typically used for navigating to a different location.

Supports the convenience API (lesser code) and the composition API (more customization).

Example of convenience API:

import { Anchor } from "@stratakit/bricks";
<Anchor href="https://www.example.com">Example</Anchor>

Example of composition API:

import * as Anchor from "@stratakit/bricks/Anchor";
<Anchor.Root href="https://www.example.com">Example</Anchor.Root>
Type:"neutral" | "accent" | undefined(optional)
Default:"neutral"
Base element:<span>

Displays the anchor text.

Type:ReactNode(required)

The content displayed inside the anchor.

Base element:<span>

Displays an external link marker, with visually hidden text for screen readers.

Type:string | undefined(optional)
Default:"external"

Visually hidden text for screen readers.