Link

<script lang="ts">
  import { Link } from "kumo-svelte/components/link";
</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>

Import

import { ExternalIcon, Link } from "kumo-svelte/components/link";
import { LinkProvider } from "kumo-svelte/utils";

Usage

Basic Link

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

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

<p>
  Read our <Link href="/docs">documentation</Link> for more details.
</p>

External Links

Use the ExternalIcon component to indicate links that open in a new tab.

<script lang="ts">
  import { ExternalIcon, Link } from "kumo-svelte/components/link";
</script>

<Link href="https://cloudflare.com" target="_blank" rel="noopener noreferrer">
  Visit Cloudflare <ExternalIcon />
</Link>

Framework Integration (LinkProvider)

For app-wide router integration, configure a LinkProvider at your app root. Your wrapper component receives href and to and is responsible for bridging to your router’s API. This lets engineers use <Link href="..."> everywhere without thinking about routing internals.

<script lang="ts">
  import { LinkProvider } from "kumo-svelte/utils";
  import AppLink from "./app-link.svelte";
</script>

<LinkProvider component={AppLink}>
  <slot />
</LinkProvider>

Examples

Inline in Paragraph

Links flow naturally within paragraph text with proper underline offset.

<script lang="ts">
  import { Link } from "kumo-svelte/components/link";
</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 ExternalIcon to visually indicate links that navigate away from your site.

<script lang="ts">
  import { ExternalIcon, Link } from "kumo-svelte/components/link";
</script>

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

Current Variant (Color Inheritance)

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

<script lang="ts">
  import { Link } from "kumo-svelte/components/link";
</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>

Framework Integration with LinkProvider

Use LinkProvider when you need all Link components to render through a framework-specific component.

<script lang="ts">
  import { ExternalIcon, Link } from "kumo-svelte/components/link";
  import { LinkProvider } from "kumo-svelte/utils";
  import CustomRouterLink from "./custom-router-link.svelte";
</script>

<LinkProvider component={CustomRouterLink}>
  <div class="flex flex-col gap-x-6 gap-y-4 text-base md:flex-row">
    <Link href="/components/button" variant="inline">Button docs (via provider)</Link>
    <Link href="https://developers.cloudflare.com" target="_blank" rel="noopener noreferrer" variant="inline">
      Cloudflare Docs <ExternalIcon />
    </Link>
  </div>
</LinkProvider>

API Reference

Design Guidelines

When to Use Each Variant

• inline: default choice for links within body text.
• current: links inside alerts, banners, or other colored containers.
• plain: navigation menus, footers, or places where underlines are distracting.

External Link Indicators

• Always use ExternalIcon for links that open in new tabs.
• Set target="_blank" and rel="noopener noreferrer" for security.
• The icon provides a visual cue that users will leave the current site.

Framework Integration

• Configure LinkProvider at your app root to integrate with your client-side router.
• Your wrapper receives href and maps it to your router’s navigation prop.
• Use href for link destinations; your wrapper can forward it as to if needed.

Accessibility

• Links are keyboard focusable by default.
• The external icon has aria-hidden="true"; add descriptive text for screen readers when needed.
• Ensure sufficient color contrast for all variants.
• Use descriptive link text.