Тост Toast

Тост — это короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды. Использование тоста позволяет не прерывать сценарий пользователя.

Используйте тост, если нет возможности сообщить обратную связь в том месте экрана, где пользователь произвел действие, и где находится фокус его внимания. Тост может сообщать о положительном, нейтральном и отрицательном результате.

Для положительного и нейтрального результата используйте обычный тост.

Например, пользователь из модального окна отправил документ, окно закрылось, на странице появился тост об успешной отправке.

Для отрицательного результата используйте красный тост.

Например, когда не удалось обновить данные на странице или сохранить изменения.

Если команда выполняется долго, и пользователь может переключиться на другое окно, лучше использовать лоадер и сообщение о результате показать на его месте.

Тост появляется с анимацией в верхней части экрана, и автоматически исчезает по таймауту.

В тосте может быть кнопка для отмены действия или для получения более подробной информации.

Тост со ссылкой остается на экране в течение 7 секунд и всегда содержит крестик для ручного закрытия.

Тост без ссылки остается на экране в течение 3 секунд.

В один момент времени на экране может находиться только 1 тост. Перед появлением следующего тоста текущий скрывается, даже если время его показа ещё не истекло.

Тост не может быть заменой валидации. Это значит, что для сообщений об ошибках нужно использовать стандартные форматы валидации контролов.

Неправильно

Красный тост стоит использовать, например, когда обновление страницы или подгрузка контента не состоялась, как в случае с глобальным лоадером, или, если предусмотренное в форме автосохранение не работает.

Такой тост показывается 10 секунд и всегда содержит крестик.

Тост — это временный элемент интерфейса, закрыв который пользователь перестанет видеть информацию о том, что что-то идёт не так. Поэтому лучше показать ошибку прямо в интерейсе. Например, когда автосохранение не работает, появляется иконка-статус:

Если ошибка повторяется во время одного сеанса работы пользователя с сервисом, не нужно показывать тост каждый раз, покажите его только при появлении проблемы.

Например, если перестало работать автосохранение, которое запускается каждые 15 секунд, и каждые 15 секунд будет выскакивать красный тост — это будет отвлекать и раздражать пользователя. Пользователь может продолжать работать с формой и заполнять её, форма сохранится, когда интернет-соединение восстановится.

Текст должен быть максимально кратким, но самодостаточным. Из текста должно быть понятно, что произошло. В конце текста точка не ставится.

Неправильно

Правильно

Текст должен быть лаконичным и не может быть набран в две строки на широком экране.

Неправильно

Исключение: мобильном экран.

Тост выравнивается по центру, с отступом 24 px от верхней границы окна браузера. Рекомендуемая ширина — от 20 до 40 % ширины контента.

Тост появляется из-за верхней границы экрана со сглаживанием easeOutCubic за 200 мс и скрывается с анимацией FadeOut за 150 мс.