Components / Foundations

Link

Component + manager

Renders a hyperlink (`<a>`) with optional popover preview. Can handle internal (SvelteKit `goto`) or external links, show a QR, copy link, etc.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentLink

Managercreate_link_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Link, create_link_manager } from "sveltekit-ui"

  const manager = create_link_manager({
    href: "https://svelte.dev",
    display_text: "Svelte documentation",
    is_show_preview: true,
  })
</script>

<Link {manager} />

API reference

Configure the manager, call its methods, and read its reactive state.

6 entries in configuration

Property	Type	Default	Description
`id`	`string or null`	`generated unique ID`	A unique string ID for this link.
`href`	`string`	`null`	The URL to navigate to. Determines internal vs external link.
`display_text`	`string`	`null`	The text displayed in the link if no child content is provided.
`text_color`	`CSS color`	`null`	Color of the link text.
`is_show_preview`	`boolean`	`!is_internal_link`	If true, clicking the link opens a popover with a QR code and copy button. If false, no popover is shown.
`on_goto_external_link`	`function`	`null`	Optional callback when user opens an external link.