Skip to content
Components

Anchor

Inline text link - a styled <a> with a token underline, an offset, and the shared focus ring. variant="muted" sits quietly in body copy until hovered. Pass a framework link to render (e.g. next/link) to keep client-side navigation. RSC-safe.

Compare the terracotta finishes, then read the care guide before ordering samples.

Usage

import { Anchor, AnchorProps, anchorVariants } from "@instruments/materia-ui/components/anchor";

Best practices

  • Anchor is for text links, whether inside prose or standing alone (a caption, an index row, a footer link); for a button-shaped navigation action give Button a render link instead.

  • Compose routers via render (<Anchor render={<Link href="…" />}>…</Anchor>) - never nest a raw <a> inside Anchor's own <a>.

  • Add icon or suffixIcon (as on Button) for an arrow or external-link cue; the icon sits outside the underline and wraps with the text, and is decorative, so the link text must still name the destination.

  • Use variant="muted" inside dense copy so the underline stays quiet; the default variant stands out from the surrounding text.

  • Use variant="plain" where the link is already set apart by its position, such as a caption under a tile or a row in an index; keep an underline on links inside running text.

Props

PropTypeDefaultDescription
iconIconComponent

Icon shown before the link text, at the xs icon size. Not underlined.

suffixIconIconComponent

Icon shown after the link text, at the xs icon size. Not underlined.

variant"default" | "muted" | "plain" | null | undefined

Also exports

  • interfaceAnchorProps
  • constanchorVariants

Composition

Builds on

Icon

Used by

MegaMenu, SiteFooter