Status

Status показывает текущее состояние светлой подложкой тона статуса, тёмной подписью и насыщенным круглым значком; blocked — тёмная подложка. При editable открывается список значений; подпись, значок и цвет значка приходят из данных.

Статус: experimental · в системе с 2026-06 · интерактивность: conditional (по конфигурации)

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

Компактный бейдж состояния сущности в таблице или карточке.
Смена статуса на месте — editable открывает поповер выбора.

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

Сообщение о событии — статус живёт постоянно, а не появляется по случаю.
Метка-категория без семантики состояния.

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

alert — сообщение о событии
tag — метка-категория, фильтр
extra-group — сводные счётчики статусов в строку

Конструктор

Меняйте прикладной статус, способ показа и возможность редактирования. В редактируемом режиме значение также обновляется выбором в поповере.

Moderated

Базовый

На модерации

Approved

Rejected

Заблокированы

Undefined

<!--
  🟢

  Базовый Status: словарь состояний кита ADMY — светлая подложка тона,
  тёмная подпись и насыщенный круглый значок; blocked — тёмная подложка.
-->

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

const items = [
	{ value: 0, text: t("Moderated"), key: "moderated", icon: "moderated", order: 0, color: "var(--c-status-moderated)" },
	{ value: 1, text: "Approved", key: "approved", icon: "approved", order: 1, color: "var(--c-status-approved)" },
	{ value: 2, text: "Rejected", key: "rejected", icon: "rejected", order: 2, color: "var(--c-status-rejected)" },
	{ value: 3, text: t("Blocked"), key: "blocked", icon: "blocked", order: 3, color: "var(--c-status-blocked)" },
	{ value: 4, text: "Undefined", key: "undefined", icon: "undefined", order: 4, color: "var(--c-status-undefined)" },
];
</script>

<Status value={0} {items} />
<Status value={1} {items} />
<Status value={2} {items} />
<Status value={3} {items} />
<Status value={4} {items} />

Редактируемый

Текущее значение: На модерации

<!--
  🟢

  Редактируемый Status открывает поповер выбора: круглые значки статусов
  увеличиваются при наведении, выбор меняет значение и зовёт onchange.
-->

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

let value = $state(0);

const items = [
	{ value: 0, text: t("Moderated"), key: "moderated", icon: "moderated", order: 0, color: "var(--c-status-moderated)" },
	{ value: 1, text: "Approved", key: "approved", icon: "approved", order: 1, color: "var(--c-status-approved)" },
	{ value: 2, text: "Rejected", key: "rejected", icon: "rejected", order: 2, color: "var(--c-status-rejected)" },
	{ value: 3, text: t("Blocked"), key: "blocked", icon: "blocked", order: 3, color: "var(--c-status-blocked)" },
];
</script>

<div style="display: grid; gap: var(--sp-2); justify-items: start;">
	<Status bind:value {items} editable />
	<p style="margin: 0; font-size: var(--fs-s);">
		{t("Текущее значение:")} {items.find((item) => item.value === value)?.text}
	</p>
</div>

Иконка

Approved

<!--
  🟢

  Компактные режимы Status: minimal убирает значок из подложки, icon
  оставляет только круглый значок без подложки.
-->

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

const items = [
	{ value: 0, text: "Approved", key: "approved", icon: "approved", order: 0, color: "var(--c-status-approved)" },
	{ value: 1, text: "Rejected", key: "rejected", icon: "rejected", order: 1, color: "var(--c-status-rejected)" },
	{ value: 2, text: t("Blocked"), key: "blocked", icon: "blocked", order: 2, color: "var(--c-status-blocked)" },
];
</script>

<Status value={0} {items} minimal />
<Status value={0} {items} icon />
<Status value={1} {items} icon />
<Status value={2} {items} icon />

Сырой пример ADMY

Данные продукта без витринной обработки — так статус приходит из ADMY.

<!--
  🟢

  Сырой пример ADMY: статус собран из данных продукта как есть — value,
  editable и items с ключом, иконкой и порядком у каждой позиции.
-->

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

const items = [
	{ value: 0, text: t("Moderated"), key: "moderated", icon: "moderated", order: 0 },
	{ value: 1, text: "Approved", key: "approved", icon: "approved", order: 1 },
	{ value: 2, text: t("Blocked"), key: "blocked", icon: "blocked", order: 2 },
];
</script>

<Status value={0} {items} editable />