Ambar UI — Svelte 5 Components with Tailwind CSS v4

Navigation links with button-grade feedback: 17 decoration variants, 6 loop motion effects, pill and button surfaces, icon support, external state, and disabled state.

Import

import Link from '$lib/components/Link.svelte';

Usage

Open analytics

svelte

<Link href="/page" variant="accent">Go to page</Link>

Inline Links

Use inline for body text, accent for primary actions, muted for secondary routes.

Use inline links for normal text navigation, accent links for the main jump, and muted links for secondary routes.

Creator tools Open analytics Privacy settings Disabled link

svelte

<!-- Default inline link -->
<Link href="/page">Creator tools</Link>

<!-- Accent link -->
<Link href="/analytics" variant="accent">Open analytics</Link>

<!-- Muted link -->
<Link href="/settings" variant="muted">Privacy settings</Link>

<!-- Disabled -->
<Link href="/page" disabled>Disabled link</Link>

Text Decoration

Decoration variants let links read as text first, action second. Hover to see the animated interaction.

Underline Double Dotted Dashed Wavy Overline Over + under Strike Strike soft Mark Reveal

Decoration variants are useful in context: terms , section jump , highlighted route , or removed route .

svelte

<Link href="#" variant="underline">Underline</Link>
<Link href="#" variant="double">Double</Link>
<Link href="#" variant="dotted">Dotted</Link>
<Link href="#" variant="dashed">Dashed</Link>
<Link href="#" variant="wavy">Wavy</Link>
<Link href="#" variant="overline">Overline</Link>
<Link href="#" variant="over-under">Over + under</Link>
<Link href="#" variant="strike">Strike</Link>
<Link href="#" variant="mark">Mark</Link>
<Link href="#" variant="reveal">Reveal</Link>

Loop Motion

The motion prop adds a looping ambient animation — works on any variant.

Creator fund Live jump Draft route Quiet route Boosted link Trending route

svelte

<Link href="#" variant="underline" motion="line">Creator fund</Link>
<Link href="#" variant="accent"   motion="scan">Live jump</Link>
<Link href="#" variant="dashed"   motion="dash">Draft route</Link>
<Link href="#" variant="muted"    motion="pulse">Quiet route</Link>
<Link href="#" variant="inline"   motion="glint">Boosted link</Link>
<Link href="#" variant="inline"   motion="highlight">Trending route</Link>

Button Models

Surface variants: pill renders on a secondary background, button uses the accent fill, icon is a square icon button.

Profile Small pill Continue GitHub

svelte

<!-- Pill surface -->
<Link href="/profile" variant="pill" icon={ICONS.user}>Profile</Link>

<!-- Button surface -->
<Link href="/continue" variant="button" icon={ICONS.arrow} iconSide="right">Continue</Link>

<!-- External button -->
<Link href="https://github.com/blancos13/ambar-svelte" variant="button" external>GitHub</Link>

<!-- Icon-only -->
<Link href="/search" variant="icon" icon={ICONS.search} ariaLabel="Search" />

Sizes

sm, md (default), and lg — affects font size and min-height for surface variants.

Small Medium Large Large pill

External Links

Pass external to open in a new tab. An arrow icon is appended automatically.

GitHub Svelte docs

svelte

<Link href="https://example.com" external>Open in new tab</Link>

API Reference

Prop	Type	Default	Description
`href`	`string`	`'#'`	The URL the link points to.
`variant`	`'inline' \| 'accent' \| 'muted' \| 'underline' \| 'double' \| 'dotted' \| 'dashed' \| 'wavy' \| 'overline' \| 'over-under' \| 'strike' \| 'strike-soft' \| 'mark' \| 'reveal' \| 'pill' \| 'button' \| 'icon'`	`'inline'`	Visual style of the link. Text decoration variants apply CSS decoration. Surface variants (pill, button) render as a filled element.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Font and minimum height size.
`motion`	`'none' \| 'line' \| 'scan' \| 'dash' \| 'pulse' \| 'glint' \| 'highlight'`	`'none'`	Adds a looping ambient animation. Works on any variant.
`icon`	`string`	`undefined`	SVG path data for an icon rendered alongside the label.
`iconSide`	`'left' \| 'right'`	`'left'`	Which side to place the icon.
`external`	`boolean`	`false`	Adds target="_blank" and rel="noreferrer", and shows an external arrow icon.
`disabled`	`boolean`	`false`	Disables the link visually and functionally.
`animated`	`boolean`	`true`	Enables hover micro-animations on decoration variants.
`ariaLabel`	`string`	`undefined`	Accessible label, required for icon-only links.
`onclick`	`(event: MouseEvent) => void`	`undefined`	Click handler. Not called when the link is disabled.
`class`	`string`	`''`	Extra CSS classes to pass to the anchor element.