Link

1import { Link } from '@/ui/Display'23<p>4  The full trace is attached to <Link href="/d/4021">deployment 4021</Link>.5</p>67<Link href="/deployments" variant="standalone">8  View all deployments <ArrowRight />9</Link>1011// External: the icon is decoration, the hidden text is the announcement,12// and rel is not optional.13<a href={url} target="_blank" rel="noopener noreferrer">14  WCAG 2.2 recommendation15  <ExternalLink aria-hidden />16  <span className="sr-only"> (opens in a new tab)</span>17</a>1819// The test: does the URL change? Then it is an anchor, and it must survive20// middle-click, ⌘-click and "copy link address".21<a href="/d/4021">View deployment</a>          {/* navigates */}22<button onClick={rollback}>Roll back</button>  {/* acts */}2324// A disabled link is not a thing. Render a span — an anchor with no href is25// still announced as a link and still focusable in some browsers.26{canView ? (27  <Link href={href}>{label}</Link>28) : (29  <span aria-disabled className="text-[var(--ds-fg-disabled)]">{label}</span>30)}3132// In a router, keep the href real so the browser affordances survive.33<a href={to} onClick={(e) => {34  if (e.metaKey || e.ctrlKey || e.button !== 0) return   // let the browser win35  e.preventDefault()36  navigate(to)37}}>{children}</a>

<!-- Inline: underlined, because colour alone is not a signal. -->
<p>
  The rollback returned api-gateway to
  <a href="/builds/4019" class="ds-link">build 4019</a>.
</p>

<!-- Standalone: position and weight mark it, so the underline waits for hover. -->
<a href="/deployments" class="ds-link ds-link--standalone">
  View all deployments
  <svg aria-hidden="true">…</svg>
</a>

<!-- External: icon hidden, announcement in text, rel not optional. -->
<a href="https://www.w3.org/TR/WCAG22/" target="_blank" rel="noopener noreferrer">
  WCAG 2.2 recommendation
  <svg aria-hidden="true">…</svg>
  <span class="sr-only"> (opens in a new tab)</span>
</a>

<!-- Download: type and size visible, so nobody clicks blind. -->
<a href="/logs/4021.txt" download>
  deployment-log-4021.txt <span>(284 KB)</span>
</a>

<!-- Navigation: aria-current is what says "you are here". -->
<a href="/settings" aria-current="page">Settings</a>

.ds-link {
  color: var(--ds-accent-text);      /* the text-certified step, not the fill */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  /* Clears descenders on g, y and p. A flush underline strikes through them
     and makes the word harder to read, not easier to see. */
  text-underline-offset: 3px;
  /* Lighter at rest so it supports the word rather than competing with it. */
  text-decoration-color: var(--ds-accent-border);
  border-radius: var(--radius-xs);
  transition: text-decoration-color 120ms;
}

.ds-link:hover { text-decoration-color: var(--ds-accent-text); }

/* Offset so the ring does not sit on the underline. */
.ds-link:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 2px;
}

/* Position and weight already mark it, so the underline waits for hover. */
.ds-link--standalone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  text-decoration: none;
}
.ds-link--standalone:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Worth having in docs and search results; pointless in an app where every
   link is visited within a week. */
.ds-prose .ds-link:visited { color: var(--p-brand-300); }

/* Fewer, longer link phrases beat many short ones on touch — an inline link
   cannot be padded without breaking the line rhythm. */
@media (pointer: coarse) {
  .ds-link--standalone { padding-block: 10px; }
}

@media (forced-colors: active) {
  .ds-link { text-decoration: underline; }   /* colour is overridden here */
}