Тост Toast

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

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

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

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

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

Тост не может быть заменой валидации.

Неправильно

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

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

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

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

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

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

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

Тост — это временный элемент интерфейса, закрыв который пользователь перестанет видеть информацию о том, что что-то идёт не так.

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

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

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

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

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

Неправильно

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

Размер кликабельных зон должен быть во всю высоту тоста — 40 рх.

Темная плашка тоста по стилю совпадает с плашкой хинта. Ссылка в тосте светлее, чем обычная ссылка на белом фоне, и набрана полужирным начертанием.

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