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

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

## Content guidelines

A link visually represents clickable text or elements that navigate users to other pages, sections, or resources. Links appear colored to indicate interactivity and follow accessibility and design standards for clarity and usability.

### When to use

- For navigation to internal or external destinations. Use external link icon in the latter case.
- For inline standalone contextual actions (for example, **Learn more**).
- Avoid using links for actions; use [ghost buttons](/components/action/button/) instead.

### Should I use a button or a link?

A link should be used when navigating between pages, while a button should be used for actions like submitting a form, downloading a file, or triggering a task.

- Use a link for **View more articles**.
- Use a button for **Submit form**.

### Style

- Use meaningful, descriptive link text.

<DoDont pairs={[{ do: "View pipeline details", dont: "Click here" }]} />

- Avoid standalone icons as links unless accompanied by an accessible label.
- Use sentence case and no terminal punctuation.
- Keep links clear, concise, accessible, and consistent.

### Behavior

- Links open in the same tab unless explicitly labeled as external.
- Underline on hover for clarity.
- Visited state should be visually distinct whether inline or standalone.

### Clear and descriptive link text

Link text should clearly describe the destination or action. Avoid vague text that does not convey enough information to the user or to assistive technologies.

<DoDont pairs={[{ do: "View your order details", dont: "Click here" }, { do: "Visit our home page", dont: "http://example.com" }, { do: "Download report", dont: "Get report" }, { do: "Explore features", dont: "Click to learn more" }, { do: "View our services", dont: "Click here to view our list of services" }]} />

### Action-oriented language

Use action verbs for links that load tasks. Action-oriented language guides the user on what to expect. This is especially helpful for calls to action. Avoid passive or generic terms and phrases. Always provide clarity on what will happen or what the user will achieve by clicking.

### Consistency in link text

Use consistent link phrases for similar actions. Similar actions should use the same link text to help users develop familiarity and expectations. For example, if you use **Learn more** for accessing detailed content in one area, avoid switching to **Read details** elsewhere. Keep link text brief but meaningful.

### Avoid linking full sentences or paragraphs

Link only the specific, relevant portion of text. Avoid linking entire sentences or paragraphs, as this can overwhelm the user and reduce readability.

<DoDont pairs={[{ do: "Read our [user experience design blog]().", dont: "[Click here to read our blog about user experience design]()." }]} />