НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Уведомление

Уведомление (toast) — короткое сообщение, которое подтверждает действие, всплывает внизу экрана и исчезает само.

Стабильный Figma
ОбзорИспользованиеAPIДоступность
Save changes 
<tk-button onclick="document.querySelector('tk-toaster').toast('Changes saved')">Save changes</tk-button>
<tk-toaster></tk-toaster>

Анатомия

Часть Что это
tk-toaster область, которую вы добавляете один раз; она ставит уведомления на место, ведёт очередь и объявляет их
tk-toast плашка, которую область создаёт для каждого сообщения
сообщение одна короткая строка текста
действие одна кнопка, по желанию, например «Отменить»
кнопка закрытия ✕, только с dismissible

Вид один: тёмная плашка в светлой теме и светлая в тёмной. Тонов и иконок нет.

Показать уведомление

Добавьте на страницу один пустой tk-toaster и вызывайте у него toast().

<tk-toaster></tk-toaster>
<tk-button onclick="document.querySelector('tk-toaster').toast('Changes saved')">Save changes</tk-button>
  • Поставьте область в разметку страницы, пустой, до первого уведомления. Скринридеры объявляют только ту live-область, которая уже была, поэтому не создавайте её в момент, когда она понадобилась.
  • Одна область на страницу.

Действия

const toaster = document.querySelector('tk-toaster');

toaster.toast('Conversation archived', {
  action: {
    label: 'Undo',
    handler: () => restoreConversation(),
    altText: 'Undo: press {hotkey} then Enter',
  },
});
  • Не больше одного действия, и только как ярлык. То же самое пользователь должен суметь сделать где-то ещё на странице. Если действие — единственный путь, берите диалог.
  • С действием обязателен altText. Скринридер прочитает его после сообщения, поэтому скажите, как добраться до действия. {hotkey} заменяется на горячую клавишу области, по умолчанию F8.
  • dismissible: true добавляет ✕. Большинству уведомлений он не нужен: они уходят сами.

Поведение

Уведомление Показывается
без действия 5 секунд
с действием не меньше 10 секунд
  • Наведение, фокус и переход в другое окно ставят таймер на паузу. Потом он идёт дальше с оставшимся временем.
  • Для длинного сообщения задайте duration. Закладывайте около 5 секунд плюс 1 секунду на каждые 120 слов.
  • За раз показывается одно уведомление, в порядке поступления. То же сообщение дважды подряд перезапускает текущее, а не встаёт в очередь копией.
  • В очереди ждут до 3 уведомлений (max-queue). Сверх этого самое старое ожидающее отбрасывается.
  • toast() возвращает хэндл. handle.dismiss() убирает уведомление раньше времени; вызывать его безопасно всегда.

Перед тем как уведомление уйдёт, tk-toaster запускает отменяемое событие tk-dismiss. preventDefault() оставляет его на экране, например пока не закончится отмена действия.

toaster.addEventListener('tk-dismiss', (event) => {
  if (event.detail.reason === 'action' && undoInProgress) event.preventDefault();
});

Расположение

Уведомление всплывает внизу по центру, поверх диалогов, в 16px от нижнего края. Если внизу есть панель навигации, увеличьте --tk-toaster-offset, чтобы уведомление её не закрывало. Пустая область не мешает кликам по странице.