Link - Kumo Svelte

Default inline link Current color link Plain inline link

<script lang="ts">
  import { Link } from 'kumo-svelte';
</script>

<div class="grid gap-x-6 gap-y-4 text-base md:grid-cols-3">
  <Link href="#">Default inline link</Link>
  <Link href="#" variant="current">Current color link</Link>
  <Link href="#" variant="plain">Plain inline link</Link>
</div>

Installation

Barrel

import { Link, LinkExternalIcon } from 'kumo-svelte';

Granular

import { Link, LinkExternalIcon } from 'kumo-svelte/components/link';

Usage

Basic Link

The default Link component renders an underlined anchor with primary color styling.

<script lang="ts">import { Link } from 'kumo-svelte';</script><p>  Read our <Link href="/docs">documentation</Link> for more details.</p>

External Links

Use LinkExternalIcon to indicate links that open in a new tab.

<script lang="ts">import { Link, LinkExternalIcon } from 'kumo-svelte';</script><Link  href="https://cloudflare.com"  target="_blank"  rel="noopener noreferrer">  Visit Cloudflare <LinkExternalIcon /></Link>

SvelteKit Links

SvelteKit uses native anchors for client-side navigation, so pass destinations with href.

<script lang="ts">import { Link } from 'kumo-svelte';</script><Link href="/dashboard" variant="inline">Dashboard</Link>

Examples

Inline in Paragraph

Links flow naturally within paragraph text with proper underline offset.

This is a paragraph with an inline link that flows naturally with the surrounding text. Links maintain proper underline offset for readability.

<script lang="ts">
  import { Link } from 'kumo-svelte';
</script>

<p class="mx-auto max-w-md text-base leading-relaxed text-kumo-default">
  This is a paragraph with an <Link href="#">inline link</Link> that flows naturally with the surrounding
  text. Links maintain proper underline offset for readability.
</p>

External Link with Icon

Use LinkExternalIcon to visually indicate links that navigate away from your site.

Visit Cloudflare

<script lang="ts">
  import { Link, LinkExternalIcon } from 'kumo-svelte';
</script>

<Link href="https://cloudflare.com" target="_blank" rel="noopener noreferrer" class="text-base">
  Visit Cloudflare <LinkExternalIcon />
</Link>

Current Variant (Color Inheritance)

The current variant inherits color from its parent, useful for links within colored contexts like alerts.

This error message contains a link that inherits the red color from its parent.

<script lang="ts">
  import { Link } from 'kumo-svelte';
</script>

<p class="text-base text-kumo-danger">
  This error message contains a <Link href="#" variant="current">link</Link> that inherits the red color
  from its parent.
</p>

API Reference

Link Props

Extends all native anchor element attributes.

Prop	Type	Default	Description
variant	KumoLinkVariant	"inline"	Visual style variant
href	string	-	Link destination URL.
to	string	-	Deprecated. Use `href` instead.
class	string	-	Additional CSS classes
children	Snippet	-	Link content

Variants

Variant	Description	Use Case
inline	Primary color with underline	Default for inline text links
current	Inherits parent text color with underline	Links within colored contexts (alerts, errors)
plain	Primary color without underline	Navigation links, menus, footers

Link.ExternalIcon

SVG icon component to indicate external links. Accepts SVG element attributes.

<script lang="ts">  import { Link, LinkExternalIcon } from 'kumo-svelte';</script><Link href="https://example.com" target="_blank" rel="noopener noreferrer">  External Site <LinkExternalIcon /></Link>

Design Guidelines

### When to Use Each Variant<ul class="ml-4 list-disc space-y-1">  <li><strong>inline</strong>: Default choice for links within body text</li>  <li><strong>current</strong>: Links inside alerts, banners, or other colored containers</li>  <li><strong>plain</strong>: Navigation menus, footers, or where underlines are distracting</li></ul>

### External Link Indicators<ul class="ml-4 list-disc space-y-1">  <li>Always use `LinkExternalIcon` for links that open in new tabs</li>  <li>Set `target="_blank"` and `rel="noopener noreferrer"` for security</li>  <li>The icon provides a visual cue that users will leave the current site</li></ul>

### Framework Integration<ul class="ml-4 list-disc space-y-1">  <li>Use `href` for SvelteKit navigation.</li>  <li>The `to` prop is deprecated; use `href` for all link destinations.</li></ul>

### Accessibility<ul class="ml-4 list-disc space-y-1">  <li>Links are keyboard focusable by default</li>  <li>The external icon has `aria-hidden="true"`; add descriptive text for screen readers</li>  <li>Ensure sufficient color contrast for all variants</li>  <li>Use descriptive link text (avoid "click here")</li></ul>