General

Link

Styled anchor element with automatic active state detection, external link handling, and raw mode for full customization. Renders as a button when no href is provided.

Playground

Experiment with different props in real-time.

Example Link

Active

Disabled

External

Raw

Basic Usage

Use the href prop to create styled links.

Documentation Button Component

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

<Link href="/docs">Documentation</Link>
<Link href="/docs/components/button">Button Component</Link>

External Links

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

GitHub Download Our Docs

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

<!-- Manually mark as external -->
<Link href="//cdn.example.com/file" external>Download</Link>

<!-- Force internal behavior on external-looking URL -->
<Link href="https://sv5ui.vercel.app/docs" external={false}>Our Docs</Link>

Active State

Active state is auto-detected from the current URL. Use exact for strict pathname matching, exactQuery to include query params, exactHash to include hash, or active to manually override.

Docs Docs (exact) API Tab Props Section Always Active

<!-- Auto-detected from current URL -->
<Link href="/docs">Docs (active if URL starts with /docs)</Link>

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

<!-- Match with query params -->
<Link href="/docs?tab=api" exactQuery>API Tab</Link>

<!-- Partial query match -->
<Link href="/docs?tab=api" exactQuery="partial">API Tab (partial)</Link>

<!-- Match with hash -->
<Link href="/docs#props" exactHash>Props Section</Link>

<!-- Manual override -->
<Link href="#" active>Always Active</Link>

Active/Inactive Classes

Apply different classes based on active state with activeClass and inactiveClass.

Custom Active Style Pill Active Style

<Link
  href="/docs"
  activeClass="font-bold underline underline-offset-4"
  inactiveClass="opacity-60"
>
  Custom Active Style
</Link>

<Link
  href="/docs/components"
  activeClass="bg-primary/10 px-2 py-1 rounded-md text-primary"
  inactiveClass="text-on-surface/50"
>
  Pill Active Style
</Link>

Disabled

Disabled links prevent navigation, reduce opacity, and set aria-disabled.

Disabled Link Disabled External

<Link href="/docs" disabled>Disabled Link</Link>
<Link href="https://github.com" disabled>Disabled External</Link>

Raw Mode

Strip all default styling with raw for full visual control via class.

Custom Styled Link Button-like Link

<!-- Raw mode: removes default styling, gives full control -->
<Link href="/docs" raw class="text-lg font-bold text-error hover:underline">
  Custom Styled Link
</Link>

<Link href="/docs" raw class="rounded-lg bg-primary px-4 py-2 text-on-primary">
  Button-like Link
</Link>

As Button

When no href is provided, renders as a <button> element. Use type to set the button type.

<!-- Renders as <button> when no href is provided -->
<Link type="button" onclick={() => alert('Clicked!')}>Click Action</Link>

<!-- Submit button -->
<Link type="submit">Submit Form</Link>

With Icons

Combine links with icons using the Icon component.

Documentation GitHub

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

<Link href="/docs" class="inline-flex items-center gap-1.5">
  <Icon name="lucide:book-open" size={16} />
  Documentation
</Link>

<Link href="https://github.com" class="inline-flex items-center gap-1.5">
  GitHub
  <Icon name="lucide:external-link" size={14} />
</Link>

UI Slots

Use the ui prop to override classes on internal elements.

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

Props

Prop	Type	Default	Description
`href`	`string`	`-`	`URL to navigate to. Renders as <button> if omitted`
`active`	`boolean`	`auto`	`Override auto-detected active state`
`exact`	`boolean`	`false`	`Require exact pathname match for active`
`exactQuery`	`boolean \| 'partial'`	`false`	`Match query params for active state`
`exactHash`	`boolean`	`false`	`Match URL hash for active state`
`activeClass`	`string`	`-`	`CSS class applied when active`
`inactiveClass`	`string`	`-`	`CSS class applied when inactive`
`disabled`	`boolean`	`false`	`Prevent navigation and reduce opacity`
`raw`	`boolean`	`false`	`Remove default styling for full control`
`external`	`boolean`	`auto`	`Open in new tab with noopener noreferrer`
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	`HTML type when rendered as button`
`target`	`string`	`-`	`Link target attribute`
`rel`	`string`	`-`	`Link rel attribute`
`ref`	`HTMLElement \| null`	`null`	`Bindable reference to root DOM element`
`class`	`string`	`-`	`Additional CSS classes on root element`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes`

Icon Kbd