Typography

Link

Inline text link with consistent focus ring and underline behavior.

import { Link } from '@lostgradient/cinder/link';
typographylink
01

Overview

Inline text link with consistent focus ring and underline behavior.

Usage

svelte 
<script lang="ts">
  import Link from '@lostgradient/cinder/link';
</script>

<!-- Links inside a text block must stay distinguishable without relying on color
     (WCAG 1.4.1 / axe link-in-text-block), so in-prose links use underline="always". -->
<p>
  Read the
  <Link href="/docs" underline="always">documentation</Link>
  for more details, or visit the
  <Link href="https://example.com" external underline="always">official site</Link>.
</p>

<!-- Underline/color variants shown as a standalone list (one link per row), not inside
     running prose. Outside a text block the hover/none treatments are an acceptable,
     intentional choice and don't trip axe's link-in-text-block rule. -->
<ul style="list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem;">
  <li><Link href="/pricing" underline="always">Always underlined</Link></li>
  <li><Link href="/pricing" underline="hover">Underline on hover</Link></li>
  <li><Link href="/pricing" underline="none">No underline</Link></li>
  <li><Link href="/pricing" color="inherit" underline="always">Inherits text color</Link></li>
  <li><Link href="/pricing" disabled>Disabled link</Link></li>
</ul>

Guidance

Use When

  • Embedding a navigable link inside body text or prose content.

Avoid When

  • Navigating between pages in a sidebar or nav bar — use NavigationItem.
Live preview
02

When to use

Use when
  • Embedding a navigable link inside body text or prose content.
Avoid when
  • Navigating between pages in a sidebar or nav bar — use NavigationItem.
03

Examples

Link

Inline text link with underline and color variants.

04

Props

Props for link
NameTypeDefaultDescription
href text The URL the link points to. Optional ONLY because a disabled link renders a <span> with no href. For any enabled (non-disabled) link you must provide it — an <a> without href is not keyboard-focusable and is not exposed as a link to assistive technology, so an enabled Link without href is a bug, not a feature.
underline 'always' | 'hover' | 'none' 'hover' Controls text-decoration behavior. - 'always' — underline is always visible. - 'hover' — underline appears on hover and focus (default). - 'none' — underline is never shown.
color 'primary' | 'inherit' 'primary' Controls the link color. - 'primary' — uses the accent/primary color token. - 'inherit' — inherits the surrounding text color.
external boolean false When true, automatically adds target="_blank" and merges rel="noopener noreferrer" with any consumer-supplied rel. Consumer-supplied target is preserved if provided.
disabled boolean false When true, renders a <span aria-disabled="true"> instead of <a>. The href is not emitted and pointer-events are disabled. Use to show a link that is contextually unavailable without removing it from the visual layout.
target HTMLAnchorAttributes['target'] Forwarded to the rendered <a>. external supplies "_blank" only when no target is given.
rel HTMLAnchorAttributes['rel'] Forwarded to the rendered <a>. "noopener noreferrer" is merged in whenever the link opens in a new tab — external is true OR the resolved target is "_blank" (case-insensitive) — and the whole value is de-duplicated case-insensitively.
tabindex number
children required snippet The link text or composed content. Required.