General

Link

Styled anchor element with automatic active state detection, external link handling, and color variants.

Playground

Experiment with different props in real-time.

Example Link

Color

Disabled

External

Raw

Basic Usage

Use the href prop to create styled links.

About Documentation Contact

<script lang="ts">
  import { Link } from 'sv5ui';
</script>

<Link href="/about">About</Link>
<Link href="/docs">Documentation</Link>
<Link href="/contact">Contact</Link>

Colors

Choose from 7 color variants.

Primary Secondary Tertiary Success Warning Error Info

<Link href="#" color="primary">Primary</Link>
<Link href="#" color="secondary">Secondary</Link>
<Link href="#" color="tertiary">Tertiary</Link>
<Link href="#" color="success">Success</Link>
<Link href="#" color="warning">Warning</Link>
<Link href="#" color="error">Error</Link>
<Link href="#" color="info">Info</Link>

External Links

Links starting with http:// or https:// are automatically treated as external with target="_blank" and rel="noopener noreferrer".

GitHub Download API

<!-- Auto-detected as external -->
<Link href="https://github.com">GitHub</Link>

<!-- Manually marked as external -->
<Link href="/api/download" external>Download API</Link>

Active State

Active state is auto-detected from the current route. Use exact for strict matching or active to override.

Docs Docs (exact) Always Active

<!-- Auto-detected from current route -->
<Link href="/docs">Docs</Link>

<!-- Exact match only -->
<Link href="/docs" exact>Docs (exact)</Link>

<!-- Manually set active -->
<Link href="#" active>Always Active</Link>

Disabled

Disabled links prevent navigation and reduce opacity.

Disabled Link Disabled Error

<Link href="/about" disabled>Disabled Link</Link>
<Link href="/about" disabled color="error">Disabled Error</Link>

Raw Mode

Strip all default styling and apply your own classes. Use activeClass and inactiveClass for state-based styling.

Custom Styled Link Nav Link

<!-- Raw link with custom styling -->
<Link href="/about" raw class="text-lg font-bold underline">
  Custom Styled Link
</Link>

<!-- Raw link with active/inactive classes -->
<Link
  href="/docs"
  raw
  activeClass="font-bold text-primary"
  inactiveClass="text-on-surface/50"
>
  Nav Link
</Link>

With Icons

Combine links with icons for enhanced visual cues.

Open in GitHub Read the Docs

<Link href="https://github.com">
  <Icon name="lucide:external-link" size={14} />
  Open in GitHub
</Link>

<Link href="/docs" color="success">
  <Icon name="lucide:book-open" size={14} />
  Read the Docs
</Link>

UI Slots

Use the ui prop to override classes on internal elements.

Slot	Description
`base`	Root anchor element — controls layout, colors, transitions

Props

Prop	Type	Default
`href`	`string`	`-`
`color`	`'primary' \| 'secondary' \| 'tertiary' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'primary'`
`active`	`boolean`	`auto`
`exact`	`boolean`	`false`
`exactQuery`	`boolean \| 'partial'`	`false`
`exactHash`	`boolean`	`false`
`activeClass`	`string`	`-`
`inactiveClass`	`string`	`-`
`disabled`	`boolean`	`false`
`raw`	`boolean`	`false`
`external`	`boolean`	`auto`
`class`	`string`	`-`
`ui`	`Record<Slot, Class>`	`-`

Icon Kbd