Элементы

Уведомление

Короткие уведомления в углу окна: успех, ошибка, сведения. Вызов из скрипта BUI.toast() или кнопкой с data-ui-toast.

toast с версии 0.1.0 со скриптом

Примеры

Уведомления из разметки

<div class="btns">
  <button class="btn btn--ghost" type="button" data-ui-toast="Ссылка скопирована в буфер обмена." data-ui-title="Готово" data-ui-variant="ok">Копировать ссылку</button>
  <button class="btn btn--ghost" type="button" data-ui-toast="Не удалось подключиться к камере. Проверьте разрешения браузера." data-ui-title="Ошибка" data-ui-variant="error">Включить камеру</button>
  <button class="btn btn--ghost" type="button" data-ui-toast="Встреча начнётся через 5 минут." data-ui-title="Напоминание" data-ui-variant="info" data-ui-duration="8000">Напомнить</button>
</div>

Вызов из скрипта с действием

BUI.toast({
  title: 'Запись удалена',
  text: 'Запись от 12/10/2026 18:30 удалена.',
  variant: 'info',
  action: { label: 'Вернуть', onClick: function () { restore(id); } },
  duration: 10000
});

<pre><code>BUI.toast({
  title: 'Запись удалена',
  text: 'Запись от 12/10/2026 18:30 удалена.',
  variant: 'info',
  action: { label: 'Вернуть', onClick: function () { restore(id); } },
  duration: 10000
});</code></pre>

Стопка уведомлений

<button class="btn btn--ghost" type="button" data-ui-toast="Участник Анна Петрова подключилась." data-ui-title="Подключение" data-ui-variant="info" data-ui-duration="0">Добавить уведомление</button>

Установка

bukatchuk-ui add toast

Вместе с компонентом установятся: tokens, fonts, base, core, button.

Файлы

Файл	Назначение
`toast.css`	стили
`toast.js`	скрипт
`example.html`	образец разметки, в проект не копируется
`toast.jinja.html`	вставка для Jinja

Варианты

Класс	Назначение
`toast--ok`
`toast--error`
`toast--info`

Клавиши

Клавиша	Действие
`Tab`	перейти к кнопкам уведомления; пока фокус на нём, таймер стоит
`Enter / Space`	нажать «Закрыть» или кнопку действия

Макрос для Jinja

{#- Кнопка, показывающая уведомление. variant: ok | error | info; duration в мс (0 — не закрывать само). -#}
{% macro toast_button(label, text, title='', variant='info', duration=None, button='ghost') -%}
<button class="btn btn--{{ button }}" type="button" data-ui-toast="{{ text }}"{% if title %} data-ui-title="{{ title }}"{% endif %} data-ui-variant="{{ variant }}"{% if duration is not none %} data-ui-duration="{{ duration }}"{% endif %}>{{ label }}</button>
{%- endmacro %}