# 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.overview"
  source="components/dist/registries/dskit.json#link"
  schema={1}
  updated="2026-05-14"
/>

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

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/link/preview.png" alt="" />

## Overview

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.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the interactive surface — receives focus, hover, press states"},{"name":"Label","description":"action verb in title case; the primary affordance signal"},{"name":"Leading icon (optional)","description":"reinforces the label; decorative when paired with text"},{"name":"Trailing icon (optional)","description":"chevron or external-link glyph for navigation hints"},{"name":"Loading indicator (optional)","description":"replaces label when action is in-flight"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"State","values":["Disabled","Pressed","Focused","Hovered","Enabled"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"hover/focus/active transitions stay within the 100-200ms band"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=8346-6897)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/link)