Anchor API
- Component status:
-
stable
Import
Section titled “Import”import { Anchor } from "@stratakit/bricks";// ORimport * as Anchor from "@stratakit/bricks/Anchor";Anchor (default)
Section titled “Anchor (default)”
Base element:
<a>
A styled anchor element, typically used for navigating to a different location.
Type:
"neutral" | "accent" | undefined (optional) Default:
"neutral" Additional props
Section titled “Additional props”Anchor.Root
Section titled “Anchor.Root”
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" Additional props
Section titled “Additional props”Anchor.Text
Section titled “Anchor.Text”
Base element:
<span>
Displays the anchor text.
children
Section titled “children” Type:
ReactNode (required) The content displayed inside the anchor.
Additional props
Section titled “Additional props”Anchor.ExternalMarker
Section titled “Anchor.ExternalMarker”
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.