Toast
Общая информация
Last updated
Общая информация
Last updated
Тост — это короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды, которое отображается в нижней части интерфейса для обеспечения быстрой обратной связи.
Label (optional). Заголовок
Indicator. Указывает на статус отображаемого сообщения.
Text. Текст / подсказка
Link. Ссылка
Button. Кнопка действия
Icon button. Элемент управления. Кнопка закрытия.
Контейнер тоста
Используйте тост, если нет возможности сообщить обратную связь в том месте экрана, где пользователь произвел действие, и где находится фокус его внимания. Например, пользователь из лайтбокса отправил документ, лайтбокс закрылся, на странице появился тост об успешной отправке.
Если команда выполняется долго, и пользователь может переключиться на другое окно, лучше использовать лоадер и сообщение о результате показать на его месте.
Тост не может быть заменой валидации.
Тост выпрыгивает из-за верхней границы окна браузера, и автоматически исчезает по таймауту. Отсюда и название.
Тост без ссылки показывается 3 секунды.
В тосте может быть ссылка для отмены действия или для получения более подробной информации о событии. Тост с ссылкой показывается 7 секунд, и всегда содержит крестик, для ручного закрытия.
Всегда показывается только 1 тост. Перед появлением следующего тоста, текущий скрывается, даже если время его показа еще не истекло.
Тост выравнивается по центру, с отступом 16 px от границ окна браузера. Рекомендуемая ширина — от 20 до 40 % ширины контента.
Размер кликабельных зон должен быть во всю высоту тоста — 40 рх.
Размер тоста 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) |
Текст должен быть максимально кратким, но самодостаточным. Из текста должно быть понятно, что произошло. В конце текста точка не ставится.
Текст не может быть набран в две строки.
В зависимости от критичности выводимого сообщения может принимать разный оттенок, например, для критичных уведомлений - красный. Для предупреждающих - оранжевый. Для успешных - зелёный. Для информирующих - синий.
Существует 4 статуса тост-сообщений:
Info. Сообщения “нейтральных” событий, на которых необходимо сделать акцент
Success. Сообщение со статусом “Успех”
Warning. Сообщение со статусом "Предупреждение"
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 |
