Divider

Divider использует нативный <hr>; productScope добавляет лёгкий гравированный край.

Статус: stable · в системе с 2026-06 · интерактивность: none (нет)

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

Граница между смысловыми блоками внутри одной плашки — горизонтальный.
Разделение инлайновых элементов в строке (тулбар, мета-строка) — вертикальный.

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

Блоки уже разнесены отступом — линия лишняя.
Декорация сама по себе — разделитель не несёт смысла.

Горизонтальный

Блок контента над разделителем.

Блок контента под разделителем.

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

<div style="display: grid; gap: var(--sp-2); width: 100%; font-size: var(--fs-s);">
  <span>{t("Блок контента над разделителем.")}</span>
  <Divider />
  <span>{t("Блок контента под разделителем.")}</span>
</div>

Вертикальный

Профиль

Настройки

Выход

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

<div style="display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-s);">
  <span>{t("Профиль")}</span>
  <Divider orientation="vertical" />
  <span>{t("Настройки")}</span>
  <Divider orientation="vertical" />
  <span>{t("Выход")}</span>
</div>

С подписью

Подпись слева, линия добирает остаток ширины — как separator легаси со слотом.

Или

Дополнительно

<!--
  🟢

  Разделитель с подписью (эталон: Vue-легаси blocks/separator со слотом):
  текст приглушённый слева, линия с бликом добирает остаток ширины.
-->

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

<div style="width: 360px; display: flex; flex-direction: column; gap: var(--sp-2);">
	<Divider>{t("Или")}</Divider>
	<Divider>{t("Дополнительно")}</Divider>
</div>