Проектування системи сповіщень (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, макс 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, специфікації анімацій, правила використання для команди.