Link

An inline anchor with the lily underline animation and safe external-link defaults.

lily ships its components through a registry, so you can read the installation guide or browse the source on GitHub — external links open in a new tab on their own.

Link is a plain <a> styled with the .link utility from the lily base stylesheet — the underline grows in from the left on hover instead of appearing at once.

Installation

npx lily-svelte@latest add link

Installs the style saved in lily.json. For a new Diamond project, run lily-svelte init --style diamond first.

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the link source from the registry into `$lib/components/ui/link`.

Usage

<script lang="ts">
	import { Link } from '$lib/components/ui/link';
</script>
 
<Link href="/docs">Read the docs</Link>

External links

Any href with a scheme (https://, mailto:, …) or a protocol-relative prefix is treated as external: it opens in a new tab with rel="noopener noreferrer". Pass external to force either way, or set target / rel yourself to override.

<Link href="https://github.com/levish0/lily-svelte">GitHub</Link>
<Link href="/report" external>Open the report in a new tab</Link>
<Link href="https://example.com" target="_self">Stay in this tab</Link>

Colour

Link inherits the surrounding text colour. For lists of links, dim them and brighten on hover.

<Link href="/docs/components/button" class="text-(--text)/72 hover:text-(--text)">Button</Link>

← Label Menubar →