Тост Toast

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

Когда использовать

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

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

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

Описание работы

Тост выпрыгивает из-за верхней границы окна браузера, и автоматически исчезает по таймауту. Отсюда и название.

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

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

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

Название

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

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

Анимация

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

Дизайн

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

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

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