Alert

Закреплённое встроенное уведомление: стоит в потоке страницы рядом с тем, к чему относится, и не исчезает само. Доносит важную, но не критическую информацию с возможностью действия.

Семантика

моды коллекции ❖ Alert · Figma 2599:41684

Info

Обновление тарифов

С 1 октября меняется комиссия за переводы юридическим лицам.

информирование, решения от пользователя не требуется

Positive

Данные сохранены

Изменения в приказе применены и доступны участникам.

успешное завершение сценария или его шага

Warning

Срок подачи истекает

До закрытия приёма заявок осталось два часа. После этого форма станет недоступна.

потенциальный риск, на который стоит обратить внимание

Negative

Не удалось загрузить данные

Проверьте подключение к интернету и повторите попытку.

выполнение операции заблокировано

Состав

пропы мастера · каждая часть отключается

Только заголовок

Сессия продлена

Description выключено, Buttons выключены

Без кнопки закрытия

Режим только для чтения

Приказ закрыт для редактирования до окончания торговой сессии.

Close Button выключен — сообщение нельзя скрыть

Со слотом

Требуется подтверждение

Загрузите файл со списком инструментов или привяжите их вручную.

Произвольное содержимое слота: изображение, поле ввода, таблица

Swap slot включён — между описанием и кнопками

Размеры и токены

снято Plugin API 2026-09-06 · мод Desktop

Элемент	Значение	Токен / переменная Figma
Внутренний отступ	16	`--ds-space-4` ← Padding/pad-200
Скругление	16	`--ds-radius-xl` ← Radius/rad-200
Рамка	1	Stroke/stroke-12,5
Ширина	600 … 1320	↔ Alert/Container/Min width · Max width
Разрядка иконка ↔ текст	8	`--ds-space-2` ← Gap/gap-100
Разрядка внутри колонки	12	`--ds-space-3` ← Gap/gap-150
Иконка статуса	24, толщина 2	icon/Size/size-300
Заголовок	18 / 24 Medium · на мобильном 16 / 24	`--ds-type-sub2-*` ← ✦ Typography/Subtitle/Sub2
Описание	14 / 20 Regular · на мобильном 12 / 16	`--ds-type-body-2-*` ← ✦ Typography/Body/Body 2
Цвет текста	оба текста одинаково	`--ds-text-primary` ← Static/Text/Neutral-Blue/Primary
Заливка	по семантике	`--ds-surface-{info,pos,warn}-low` · у негатива `--ds-surface-neutral-low`
Рамка по семантике	ступень High	`--ds-stroke-{info,pos,warn,neg}-high`
Цвет иконки	ступень Accent	`--ds-surface-{info,pos,warn,neg}-icon`
Кнопка закрытия	40 × 40, инсет 14	Tertiary IconOnly MD → `.ds-btn` ghost
Группа кнопок	высота 32, разрядка 16	`.ds-buttons-group` SM

Заливка негативного Alert серая, и это не ошибка реализации: в макете Static/Surface/Negative/Low цепочкой через Main/Neutral резолвится в нейтральную ступень. У негатива нейтральны все три ступени Low / Medium / High, красный появляется только в Accent — им покрашена иконка.

Правила использования

из документации компонента

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

Сообщение связано с текущим контекстом работы пользователя
Нужна реакция: закрыть, перейти по ссылке, повторить действие
Подтверждение успешного сохранения данных
Предупреждение о возможных последствиях действия
Ошибка валидации формы или фонового процесса

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

Требуется обязательное подтверждение перед продолжением — это Modal
Глобальное системное уведомление вне текущего места на странице — это Notification
Несколько уведомлений одного типа в одной зоне — перегружает интерфейс
Текста больше, чем помещается: 240 знаков и 5 строк описания — потолок

Клавиатура и доступность

фокус внутрь не переводится сам

Клавиша	Действие
Tab	к следующему элементу: кнопка закрытия, вторичная кнопка, третичная кнопка
Shift + Tab	к предыдущему элементу
Enter · Space	активация кнопки под фокусом

При появлении уведомления фокус не переносится внутрь автоматически — это прервало бы основной поток работы. Если действие критически важное, потребитель переводит фокус программно.
Роль контейнера зависит от семантики: status у Info и Positive, alert у Warning и Negative. Настойчивость объявления соответственно aria-live="polite" и "assertive".
Иконка статуса помечена aria-hidden: смысл несут роль и текст, а её озвучивание читало бы сообщение дважды.
Кнопка закрытия несёт aria-label="Закрыть уведомление". Кнопки действия используют видимый текст как доступное имя.

Расположение и адаптивность

мобильная ось макета шире, чем наши токены

Уведомление живёт внутри контекста страницы, формы, панели или блока и не блокирует работу с остальным. Ставится рядом с тем, к чему относится: над формой, под полем, в верхней части контентной области.
Ширина не должна превышать шести колонок сетки страницы.
На мобильных уведомление занимает всю доступную ширину с отступами от краёв, кнопка и ссылка при нехватке места перестраиваются в колонку. Отключать крестик на мобильных запрещено.
Мобильная типографика приходит сама: заголовок и описание стоят на вьюпортном ряде --ds-type-*, у которого мод до 639 px даёт ровно макетные 16/24 и 12/16.
Что действительно не выражено — одно значение. Трекинг описания на мобильном (0.5) не поставлен: токена межбуквенного расстояния у Body 2 нет ни в одном моде. Здесь стояла более широкая формулировка — будто вьюпортной оси у нас нет вовсе; она была неверной, ось лежит в site/tokens.css (до 2026-09-17 — в typography.css, файл удалён 2026-09-22).

State Explorer

Интерактивный тест состояний