Link

Link называет место назначения и сохраняет нативное поведение ссылки: переход, копирование адреса и открытие в новой вкладке.

Статус: experimental · в системе с 2026-07 · интерактивность: always (всегда)

Когда использовать

Переход внутри текста, списка или навигационной цепочки.
Открытие документа, страницы или внешнего ресурса.

Не использовать:

Действие меняет данные или состояние текущего экрана — используй Button.
Элемент только выделяет текст и никуда не ведёт.

Альтернативы:

button — Button запускает действие, а Link меняет место пользователя.

Самостоятельная ссылка

Текст прямо называет страницу назначения.

Правила типографики

<!--
  🟢

  Базовый пример Link показывает самостоятельный переход к разделу системы.
  Текст ссылки называет страницу назначения без пояснения механики перехода.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Link from "$lib/ui/Link.svelte";
</script>

<Link href="/typography">{t("Правила типографики")}</Link>

Ссылка в тексте

Ссылка остаётся различимой внутри предложения.

Перед публикацией проверьте правила контента и тона.

<!--
  🟢

  Инлайновый пример Link показывает ссылку внутри обычного предложения.
  Подчёркивание сохраняет различимость перехода без отдельной кнопки.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Link from "$lib/ui/Link.svelte";
</script>

<p>{t("Перед публикацией проверьте")} <Link href="/content">{t("правила контента и тона")}</Link>.</p>

Размеры и тон

Три кегля, приглушённый тон и подчёркивание — варианты легаси.

Обычная ссылка m Ссылка s — в подписи под полем Ссылка xs — в мете строки Приглушённая — вторичный переход С подчёркиванием — внутри абзаца

<!--
  🟢

  Размеры и тон ссылки (эталон: Vue-легаси elements/link — size, color,
  underline): три кегля, приглушённый тон и подчёркивание.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Link from "$lib/ui/Link.svelte";
</script>

<div style="display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start;">
	<Link href="/button">{t("Обычная ссылка m")}</Link>
	<Link href="/input" size="s">{t("Ссылка s — в подписи под полем")}</Link>
	<Link href="/table" size="xs">{t("Ссылка xs — в мете строки")}</Link>
	<Link href="/menu" tone="muted">{t("Приглушённая — вторичный переход")}</Link>
	<Link href="/popover" underline>{t("С подчёркиванием — внутри абзаца")}</Link>
</div>