Toaster

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

§Основные типы

Default

Применяется, когда сообщение не требует особого внимания или не относится к каким-либо конкретным действиям или событиям.

Info

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

Success

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

Предупреждение

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

Error

Используется, чтобы предупредить об ошибке и сообщить, что требуется вмешательство пользователя или исправление проблемы, — например, при неверном вводе данных или ошибке сервера. Данное состояние рекомендуется использовать с action-кнопкой, которая позволяет перейти к исправлению ошибки или получить дополнительную информацию.

§Модификации

В структуру тоста входят 5 основных частей:

1. Иконка типа тоста — компонент может использоваться как с иконкой, так и без нее. Она является дополнительным элементом.
2. Заголовок — сообщает пользователю о выполняемом действии. При наличии описания заголовок можно не использовать.
3. Описание — дополняет заголовок уточняющим текстом; может использоваться отдельно от заголовка.
4. Кнопки — тост может содержать одну или две кнопки; рекомендуется использовать первую кнопку в качестве кнопки действия. Кнопки являются дополнительными элементами.
5. Иконка закрытия — дополнительный элемент. Когда для тоста не установлен период скрытия, кнопка закрытия обязательна.

§Когда стоит применять

Тостер стоит использовать в следующих случаях:

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

§Когда применять не стоит

Тостеры не рекомендуется использовать в следующих ситуациях:

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

§Расположение на экране

Тостер появляется из правого нижнего угла.

Имеет внешние отступы: снизу M (8 px), справа XL (20 px).

§Кастомизация

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