Toast

Общая информация

Общая информация

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

1. Label (optional). Заголовок

2. Indicator. Указывает на статус отображаемого сообщения.

3. Text. Текст / подсказка

4. Link. Ссылка

5. Button. Кнопка действия

6. Icon button. Элемент управления. Кнопка закрытия.

7. Контейнер тоста

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

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

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

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

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

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

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

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

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

Размер и расположение

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

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

3. Размер тоста 350*210px

Элемент	Значение
Тост	W * H: 350px * 210px Border: 1px (solid) Left border: 4px (solid) Border-radius: 2px
Текст	14px (кегль: Regular)
Ссылка	14px (кегль: Medium)
Кнопка	Height: 32px (outer)
Индикатор	16px * 16px
Иконка	16px * 16px
Заголовок	14px (кегль: Extra Bold
Дата и время	14px (кегль: Regular)

Название

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

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

Статусы

В зависимости от критичности выводимого сообщения может принимать разный оттенок, например, для критичных уведомлений - красный. Для предупреждающих - оранжевый. Для успешных - зелёный. Для информирующих - синий.

Существует 4 статуса тост-сообщений:

1. Info. Сообщения “нейтральных” событий, на которых необходимо сделать акцент

2. Success. Сообщение со статусом “Успех”

3. Warning. Сообщение со статусом "Предупреждение"

4. Danger. Сообщение со статусом "Ошибка"

Цвета

	Значение
Warning	Заголовок: #50546B — G9 Текст: #50546B — G9 Дата и время: #777B92 — G7 Ссылка: #337EFF — B1 Кнопка: #FF7C0A — Y1 Тело: #FFE5CE — Y1-20 Обводка: #FF7C0A — Y1 Индикатор: #FF7C0A — Y1 Иконка закрытия: #777B92 — G7
Danger	Заголовок: #50546B — G9 Текст: #50546B — G9 Дата и время: #777B92 — G7 Ссылка: #337EFF — B1 Кнопка: #F14141 — R1 Тело: #FCD9D9 — R1-20 Обводка: #F14141 — R1 Индикатор: #F14141 — R1 Иконка закрытия: #777B92 — G7
Info	Заголовок: #50546B — G9 Текст: #50546B — G9 Дата и время: #777B92 — G7 Ссылка: #337EFF — B1 Кнопка: #337EFF — B1 Тело: #D6E5FF — B1-20 Обводка: #337EFF — B1 Индикатор: #337EFF — B1 Иконка закрытия: #777B92 — G7
Success	Заголовок: #50546B — G9 Текст: #50546B — G9 Дата и время: #777B92 — G7 Ссылка: #337EFF — B1 Кнопка: #49AB4D — GR1 Тело: #DBEEDB — GR1-20 Обводка: #49AB4D — GR1 Индикатор: #49AB4D — GR1 Иконка закрытия: #777B92 — G7