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.
External Link with Icon
Use LinkExternalIcon to visually indicate links that navigate away from your site.
Current Variant (Color Inheritance)
The current variant inherits color from its parent, useful for links within
colored contexts like alerts.
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>