Всплывающее уведомление для обратной связи о результатах операций. Не блокирует интерфейс. Поддерживает автозакрытие по таймеру, паузу при наведении и опциональное действие.
Варианты
data-variant
Информация
Данные успешно обновлены
Успешно
Операция завершена без ошибок
Предупреждение
Срок действия сертификата истекает через 7 дней
Ошибка
Не удалось выполнить операцию. Повторите через минуту или обратитесь в поддержку. (code: OPS-500)
Финансовые примеры
B2B контекст
Перевод ₽ 150 000 выполнен
Счёт 40817810 · Зачислено 17.05.2026 14:32
Платёж не выполнен
Недостаточно средств на счёте. (code: PAY-402)
Сессия истекает
Через 5 минут вы будете отключены. Сохраните данные.
Группа действий
форма из макета: Buttons Group, выключка влево, размер sm
Платёж требует подтверждения
Сумма превышает дневной лимит по счёту
Документ не подписан
Требуется квалифицированная подпись. (code: SGN-401)
Токены
--ds-notification-*
Токен
Значение
Описание
--ds-notification-bg
var(--ds-surface-0)
Фон уведомления
--ds-notification-text
var(--ds-text-primary)
Цвет текста
--ds-notification-r
var(--ds-radius-md)
Радиус скругления
--ds-notification-px
16px
Горизонтальный паддинг
--ds-notification-py
12px
Вертикальный паддинг
--ds-notification-gap
8px
Отступ между уведомлениями
--ds-notification-shadow
var(--ds-shadow-md)
Тень
--ds-notification-min-w
300px
Минимальная ширина
--ds-notification-max-w
420px
Максимальная ширина
--ds-notification-z
9000
Z-index контейнера
--ds-notification-bar-w
4px
Ширина цветной полосы
Тёмная тема
data-theme="dark"
Информация
Данные обновлены
Перевод выполнен
₽ 150 000 · Счёт 40817810
Платёж не выполнен
Недостаточно средств на счёте. Пополните счёт и повторите платёж. (code: PAY-402)
Доступность
ARIA · Клавиатура · WCAG 2.2 AA · Focus Ring
ARIA
Разметка
Роль alert или status — в зависимости от типа сообщения
Ссылка и вторичная кнопка используют видимый текст как доступное имя
Клавиатура
Навигация
Фокус не перемещается в уведомление автоматически при появлении — чтобы не прерывать основной поток
Если уведомление содержит критически важное действие — фокус программно переводится на первый интерактивный элемент
Tab — переход к следующему элементу (кнопка закрытия, вторичная кнопка, ссылка)
Shift + Tab — переход к предыдущему элементу
Enter — активация элемента (нажатие на кнопку или ссылку)
WCAG 2.2 AA
Восприятие
Каждый семантический тип сопровождается иконкой статуса и цветом — не только цветом
Описание лаконично, чтобы пользователь успел прочитать сообщение за 5 секунд автозакрытия
После исчезновения уведомление доступно в центре уведомлений
На мобильных устройствах запрещено отключение крестика закрытия
Focus Ring
Фокус
Outline 2px, цвет --ds-info-800 (#5475F8)
Offset 1px — виден на любом фоне
Состояние Focus возникает при навигации с клавиатуры на любом интерактивном элементе внутри уведомления
Виден при навигации с клавиатуры (:focus-visible)
Работа с клавиатурой
Tab · Shift + Tab · Enter
Клавиша
Действие
Tab
Переход к следующему интерактивному элементу: кнопка закрытия, вторичная кнопка, ссылка.
ShiftTab
Переход к предыдущему интерактивному элементу.
Enter
Активация элемента в фокусе — нажатие на кнопку или ссылку.
Фокус не перемещается в уведомление автоматически при его появлении, чтобы не прерывать основной поток. Если уведомление содержит критически важное действие, фокус программно переводится на первый интерактивный элемент.
Правила использования
Когда · Чего избегать
Правила
Когда использовать
Сообщение о результатах действия пользователя (успешное сохранение, ошибка отправки формы)
Привлечение внимания к некритичным изменениям (обновление данных)
Передача справочной информации
Появление в ответ на действие пользователя с автоматическим исчезновением через заданный интервал
Постоянное отображение, когда сообщение содержит важную, но не срочную информацию
Предоставление дополнительных действий (переход по ссылке, выполнение операции) без перезагрузки страницы