Alert

Alert сообщает о результате, предупреждении или пояснении рядом с местом реакции. Фон, рамка и иконка дублируют тон.

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

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

Короткое системное сообщение внутри формы или блока — рядом с местом реакции.
Результат операции (success/error), предупреждение (warning), пояснение (info).

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

Ошибка конкретного поля — у поля есть error.
Длинное объяснение — это обычный блок контента.

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

status — постоянное состояние сущности, а не сообщение о событии

Конструктор

Выберите смысл сообщения, плотность контейнера и возможность закрытия. После закрытия измените свойство или нажмите «Сбросить», чтобы получить новый экземпляр.

Проверьте настройки перед сохранением изменений.

Тона

Проверьте настройки перед сохранением.

Изменения сохранены.

Не удалось применить выбранное действие.

Данные обновятся после следующей синхронизации.

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

<Alert>{t("Проверьте настройки перед сохранением.")}</Alert>
<Alert tone="success">{t("Изменения сохранены.")}</Alert>
<Alert tone="error">{t("Не удалось применить выбранное действие.")}</Alert>
<Alert tone="info">{t("Данные обновятся после следующей синхронизации.")}</Alert>

Плоский

Сообщение без контейнера, когда рамка уже есть у родительского блока.

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

<Alert flat>{t("Сообщение без контейнера, когда рамка уже есть у родительского блока.")}</Alert>

Закрываемый

Это уведомление можно скрыть крестиком справа.

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

<Alert tone="success" closeable>
  {t("Это уведомление можно скрыть крестиком справа.")}
</Alert>