Delta

Delta показывает изменение показателя: стрелка вверх-вправо на зелёной подложке для роста, вниз-вправо на красной для падения, без стрелки на серой для нейтрального («+2 new», «CTR 3.12%»). Текст приходит готовым, смысл задаёт trend, а не знак в строке: рост расхода может быть плохой новостью, и это решает продукт.

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

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

Рядом с числом Kpi.
В шапке виджета или строке таблицы как компактный маркер изменения.

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

Статус сущности — Status или Tag.
Длинный текст — Tag.

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

tag — метка без смысла изменения
status — состояние сущности

Три смысла

Рост, падение и нейтральная плашка, а также без стрелки.

+8.7% −21.4% +2 новых CTR 3.12%

<!--
  🟢

  Три смысла плашки: рост, падение, нейтрально; и рост без стрелки.
-->

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

<div style="display: flex; gap: var(--sp-2); align-items: center;">
	<Delta value="+8.7%" trend="up" />
	<Delta value="−21.4%" trend="down" />
	<Delta value={t("+2 new")} trend="neutral" />
	<Delta value="CTR 3.12%" trend="up" icon={false} />
</div>