Toast

Toast сообщает результат вне текущего потока, не забирает фокус и позволяет закрыть сообщение или выполнить одно обратное действие.

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

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

Завершившийся результат не имеет устойчивого места в текущей области.
После обратимого действия нужно кратко предложить отмену.
Ошибка относится ко всему событию и подсказывает следующий шаг.

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

Сообщение относится к видимой форме или блоку — используй Alert.
Нужно показывать постоянное состояние сущности — используй Status.
Операция ещё выполняется — показывай процесс рядом с его источником.

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

alert — Alert остаётся рядом с причиной и подходит для локальной обратной связи.
status — Status показывает устойчивое состояние, а не краткое событие.

Тона

Четыре смысла используют один и тот же контракт сообщения.

<!--
  🟢

  Пример тонов создаёт по одному завершившемуся сообщению выбранного смысла.
  Очередь изначально пуста, поэтому портальный хост не перекрывает другие демо.
-->

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

const messages = {
	info: t("Новая версия отчёта доступна."),
	success: t("Настройки сохранены."),
	warning: t("Лимит кампании почти исчерпан."),
	error: t("Экспорт не создан. Повторите попытку."),
};

let items = $state([]);
let nextId = 0;

function show(tone) {
	nextId += 1;
	items = [...items, { id: nextId, tone, message: messages[tone] }];
}
</script>

<Button onclick={() => show("info")}>Info</Button>
<Button onclick={() => show("success")}>Success</Button>
<Button onclick={() => show("warning")}>Warning</Button>
<Button tone="danger" onclick={() => show("error")}>Error</Button>

<Toast bind:items />

Очередь

Несколько завершившихся событий сохраняют порядок добавления.

<!--
  🟢

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

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

let items = $state([]);
let batch = 0;

function addQueue() {
	batch += 1;
	items = [
		...items,
		{
			id: `${batch}-report`,
			tone: "success",
			title: t("Отчёт готов"),
			message: t("Файл можно скачать из истории экспорта."),
		},
		{
			id: `${batch}-budget`,
			tone: "warning",
			title: t("Проверьте бюджет"),
			message: t("На завтра запланировано превышение дневного лимита."),
		},
	];
}
</script>

<Button onclick={addQueue}>{t("Добавить два сообщения")}</Button>

<Toast bind:items />

Отмена действия

Обратимое действие выполняется сразу, Toast предлагает один undo.

Проект активен.

<!--
  🟢

  Пример undo выполняет обратимое действие сразу и предлагает одну отмену.
  После action Toast удаляется, а данные основного экрана возвращаются.
-->

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

let items = $state([]);
let archived = $state(false);
let nextId = 0;

function archive() {
	archived = true;
	nextId += 1;
	items = [
		...items,
		{
			id: nextId,
			tone: "success",
			message: t("Проект перемещён в архив."),
			actionLabel: t("Отменить"),
		},
	];
}

function undo() {
	archived = false;
}
</script>

<Button onclick={archive}>{t("Архивировать проект")}</Button>
<p aria-live="polite">{archived ? t("Проект в архиве.") : t("Проект активен.")}</p>

<Toast bind:items onaction={undo} />