# Link

> Inline text link with a muted variant, configurable underline, and a safe external-link mode with a new-tab arrow.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Actions
- Tags: link, anchor, external, underline, typography
- Docs: https://fancy-ui.rama.app/docs/components/link
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/link

## Import

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

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { Link } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `href` (required) | `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 |
| `sound` | `boolean` | `false` | Plays the press cue on activation, once the user has enabled sound |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | The link's text or content |

## Examples

### Basic Usage

```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 sound href="/docs/components/link">copy-pasteable</Link>
	straight from the docs — see the
	<Link sound 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 "fancy-ui-svelte";
</script>

<div class="flex flex-col gap-2">
	<p class="text-sm">
		A <Link sound 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 sound 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 "fancy-ui-svelte";
</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 sound 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 "fancy-ui-svelte";
</script>

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