Link

Navigation, with an animated underline.

A semantic `<a>` for navigation. The default `inline` variant draws an animated underline that reveals on hover/focus with a primary-tinted glow; the `button` variant styles the link as a solid primary action (no underline) without duplicating Button’s API. Off-site `http(s)` URLs are auto-detected as external — they open in a new tab with `rel="noopener noreferrer"`, gain a trailing external-link glyph, and announce “opens in a new tab”. Forwards any remaining native anchor attributes.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { Link } from 'dssoca';
</script>

<Link href="/about">about</Link>
<Link href="https://example.com">external docs</Link>
<Link variant="button" href="/get-started">get started</Link>

Use Link for navigation (renders an `<a>`, gets the browser’s link affordances and keyboard model) and Button for in-page actions (renders a `<button>`). The `button` variant is purely visual — reach for an actual Button when there is no destination URL. Honours reduced motion (the `--ss-dur-*` tokens collapse to 0ms), shows a visible `:focus-visible` ring (not just the underline), and dims visited inline links.

HTML

CSS only — static markup The exact markup the component renders, generated at build time. Use it with dssoca/vanilla.css — see Plain HTML & CSS.

html

<a href="https://example.com" class="ss-link inline external" target="_blank" rel="noopener noreferrer">
  <span class="label">external docs</span>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter" class="ss-icon ss-link-ext" style="width:var(--ss-icon);height:var(--ss-icon)" aria-hidden="true" focusable="false">
    <path d="M7 17L17 7M9 7h8v8"/>
  </svg>
  <span class="sr-only">(opens in a new tab)</span>
</a>

Props

Prop	Type	Default	Description
`href`	`string`	—	Destination URL.
`variant`	`'inline' \| 'button'`	`'inline'`	Animated-underline link (inline) or solid primary button-styled link (button).
`external`	`boolean`	—	Open in a new tab + safe rel + external glyph. Auto-detected for absolute http(s) URLs when left undefined; pass false to force same-tab.
`disabled`	`boolean`	`false`	Render the link inert: the href is dropped (no navigation, out of the tab order via tabindex="-1"), link semantics are kept with role="link" + aria-disabled="true", forwarded onclick handlers do not fire, and the external affordances are suppressed.
`el`	`HTMLAnchorElement`	—	Bindable reference to the underlying <a>.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.
`children`	`Snippet`	—	Link label.
`...rest`	`HTMLAnchorAttributes`	—	Any remaining native anchor attributes / handlers are forwarded (including an explicit target/rel that override the external defaults).