# Link

A Link visually represents clickable text or elements that navigate users to other pages, sections, or resources. It appears colored to indicate interactivity and follows accessibility and design standards for clarity and usability.

Used for navigation to a different page, an external URL, or to trigger a secondary action within a sentence. Not to be used for primary form submissions.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.link.code"
  source="components/dist/registries/dskit.json#link"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"link"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Link`.