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>

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
Name Type Default Required Bindable Description
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 unknown req
children snippet req The link text or composed content. Required.