Link

Preview

svelte

<script lang="ts">
	import { Link } from "fancy-ui-svelte";
</script>

<p class="text-foreground max-w-md text-sm leading-relaxed">
	fancy-ui ships as an npm package, but every component is also
	<Link href="/docs/components/link">copy-pasteable</Link>
	straight from the docs — see the
	<Link href="/docs" external>full component index</Link>
	for what else is in the box.
</p>

Installation

pnpm add fancy-ui-svelte

import { Link } from 'fancy-ui-svelte'

Usage

svelte

<script lang="ts">
  import { Link } from 'fancy-ui-svelte';
</script>

<Link />

Examples

Basic Usage

svelte

<script lang="ts">
	import { Link } from "$lib/fancy-ui/link";
</script>

<p class="text-foreground max-w-md text-sm leading-relaxed">
	fancy-ui ships as an npm package, but every component is also
	<Link href="/docs/components/link">copy-pasteable</Link>
	straight from the docs — see the
	<Link href="/docs" external>full component index</Link>
	for what else is in the box.
</p>

Variants

Default vs. muted color treatment.

svelte

<script lang="ts">
	import { Link } from "$lib/fancy-ui/link";
</script>

<div class="flex flex-col gap-2">
	<p class="text-sm">
		A <Link href="/docs/components/link">default link</Link> carries the brand color and matches the size
		of surrounding text.
	</p>
	<p class="text-sm">
		A <Link href="/docs/components/link" variant="muted">muted link</Link> recedes into supporting copy
		— footnotes, timestamps, "last edited by" bylines.
	</p>
</div>

External Link

Off-site link with the arrow glyph, new tab, and safe rel.

svelte

<script lang="ts">
	import { Link } from "$lib/fancy-ui/link";
</script>

<p class="text-foreground max-w-md text-sm leading-relaxed">
	Setting <code class="text-xs">external</code> appends an arrow, opens the destination in a new
	tab, and locks in a safe <code class="text-xs">rel</code> — see the
	<Link href="https://svelte.dev" external>Svelte documentation</Link>
	for an example.
</p>

Underline Modes

hover, always, and none underline behavior.

svelte

<script lang="ts">
	import { Link } from "$lib/fancy-ui/link";
</script>

<div class="flex flex-wrap items-center gap-6 text-sm">
	<Link href="/docs/components/link" underline="hover">Hover to underline</Link>
	<Link href="/docs/components/link" underline="always">Always underlined</Link>
	<Link href="/docs/components/link" underline="none">Never underlined</Link>
</div>

Props

Prop	Type	Default	Description
`href` *	string	-	Destination URL
`variant`	"default" \| "muted"	`"default"`	default reads as inline copy; muted recedes into supporting text at a smaller size
`external`	boolean	`false`	Appends an arrow glyph, defaults target to _blank, and guarantees a safe rel
`underline`	"hover" \| "always" \| "none"	`"hover"`	When the underline shows
`target`	string	-	Anchor target; external fills this in as _blank when left unset
`rel`	string	-	Anchor rel; merged with noopener noreferrer whenever the link opens a new tab
`onclick`	(event: MouseEvent) => void	-	Native click handler
`class`	string	-	Additional CSS classes
`ref`	HTMLAnchorElement \| null	`null`	Bindable element reference