Дизайн системы уведомлений (Toast/Snackbar) веб-приложения
Toast и Snackbar — временные уведомления, которые появляются поверх интерфейса и автоматически исчезают. Разница в происхождении: Snackbar — термин из Material Design (Google), Toast — из мобильной разработки (Android). В вебе эти термины часто взаимозаменяемы. Суть одна: короткое сообщение о результате действия, которое не требует ответа.
Когда использовать toast
Toast — это подтверждение, не предупреждение. Он сообщает о завершении действия, которое пользователь уже совершил.
Уместно:
- «Файл сохранён» после Ctrl+S
- «Ссылка скопирована» после клика на copy
- «Пользователь удалён» после подтверждения удаления
- «Изменения применены» после сохранения формы
Не уместно:
- Критические ошибки, требующие внимания (используйте modal или inline-ошибку)
- Предупреждения перед действием (используйте confirmation dialog)
- Длинные сообщения с несколькими действиями
Анатомия и варианты
Четыре семантических типа:
| Тип | Иконка | Цвет (Light) | Когда |
|---|---|---|---|
| Success | ✓ | green-600 | Действие выполнено успешно |
| Error | ✗ | red-600 | Действие не выполнено |
| Warning | ⚠ | amber-600 | Выполнено с оговорками |
| Info | ℹ | blue-600 | Информация без оценки |
Структура компонента:
- Иконка слева (20×20px)
- Текст сообщения (14px, max 2 строки)
- Опционально: кнопка действия (текстовая, «Отменить», «Подробнее»)
- Кнопка закрытия × (опционально, зависит от паттерна)
- Прогресс-бар снизу (показывает оставшееся время, опционально)
Позиционирование
Стандартные позиции: top-right, top-center, bottom-right, bottom-center. Выбор зависит от платформы:
- Desktop:
top-right— наиболее привычно, не перекрывает основное действие - Mobile:
bottom-center— ближе к большому пальцу, не перекрывает хедер
Позиция выбирается один раз для всего приложения и не меняется. Смешение позиций дезориентирует.
Стекирование нескольких toast
При одновременном появлении нескольких уведомлений важна логика стекирования:
- Новые появляются сверху (или снизу, зависит от позиции)
- Максимум 3–4 видимых одновременно, остальные ставятся в очередь
- Общая очередь, не дублирование одинаковых сообщений
Библиотека react-hot-toast и sonner (от Emile Kowalski) реализуют стекирование с коллапсом: несколько toast схлопываются в стек с видимым количеством. Это лучше, чем бесконечная колонна уведомлений.
Тайминги
- Автоисчезновение: 4–5 секунд для коротких, 6–8 секунд для toast с кнопкой действия
- Error toast: 8–10 секунд или без автоисчезновения (пользователь закрывает вручную)
- Анимация появления: slide + fade, 200–250ms
- Анимация исчезновения: fade, 150ms
Сроки
Дизайн системы toast/snackbar (4 типа × все состояния, варианты с кнопкой, стекирование, мобиль) — 1–3 дня: компоненты в Figma, анимационные спецификации, правила использования для команды.