Всплывающие сообщения

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

Пример

Изменения сохранены

Новая версия доступна участникам проекта.

HTML

<div class="sf-toast sf-toast--success flex items-cross-start">
  <i class="sf-icon" aria-hidden="true">check_circle</i>
  <div class="sf-toast-container flex flex-col flex-1">
    <div class="sf-toast-wrap flex flex-col">
      <div class="sf-toast-text">Изменения сохранены</div>
      <div class="sf-toast-supporting-text">Новая версия доступна участникам проекта.</div>
    </div>
  </div>
  <button type="button" class="sf-icon-button sf-icon-button--close sf-icon-button--on-surface sf-icon-button--link sf-icon-button--size-1/3" data-close aria-label="Закрыть сообщение">
    <span class="sf-close sf-close--size-1/3 flex justify-center items-center" aria-hidden="true"><span class="sf-close-icon"></span></span>
  </button>
</div>

Разметка

Минимальную разметку показывает пример выше. Части вложены так: sf-toast → иконка sf-icon и sf-toast-container → sf-toast-wrap → sf-toast-text и sf-toast-supporting-text; кнопки действий — в sf-toast-bottom после sf-toast-wrap, кнопка закрытия — последним потомком блока.

На блоке sf-toast — один класс статуса.
sf-toast-text — заголовок сообщения, sf-toast-supporting-text — пояснение. Обязателен только заголовок.
Иконка необязательна; она декоративна и берёт цвет статуса.
Компонент отвечает за одно сообщение. Положение на экране, порядок и число одновременно видимых сообщений задаёт контейнер приложения.

Варианты

Статус

Статус задаёт цвет заливки, границы, текста и иконки: sf-toast--neutral, sf-toast--info, sf-toast--success, sf-toast--warning, sf-toast--error — общий словарь статусов Framework. Выбирайте статус по смыслу сообщения, а не по желаемому цвету. Классы sf-toast--default и sf-toast--primary — другие имена neutral и info.

Черновик сохранён

Нейтральный результат без оценки.

sf-toast--neutral

Доступен новый отчёт

Сведения без оценки результата.

sf-toast--info

Изменения сохранены

Операция завершилась успешно.

sf-toast--success

Соединение нестабильно

Часть данных может прийти позже.

sf-toast--warning

Не удалось сохранить

Повторите попытку позже.

sf-toast--error

HTML

<div class="grid grid-col-1 gap-3 max-w-xl">
  <div class="flex flex-col gap-1">
    <div class="sf-toast sf-toast--neutral flex items-cross-start">
      <i class="sf-icon" aria-hidden="true">info</i>
      <div class="sf-toast-container flex flex-col flex-1">
        <div class="sf-toast-wrap flex flex-col">
          <div class="sf-toast-text">Черновик сохранён</div>
          <div class="sf-toast-supporting-text">Нейтральный результат без оценки.</div>
        </div>
      </div>
    </div>
    <code class="text-1/2 color-on-surface-variant">sf-toast--neutral</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-toast sf-toast--info flex items-cross-start">
      <i class="sf-icon" aria-hidden="true">info</i>
      <div class="sf-toast-container flex flex-col flex-1">
        <div class="sf-toast-wrap flex flex-col">
          <div class="sf-toast-text">Доступен новый отчёт</div>
          <div class="sf-toast-supporting-text">Сведения без оценки результата.</div>
        </div>
      </div>
    </div>
    <code class="text-1/2 color-on-surface-variant">sf-toast--info</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-toast sf-toast--success flex items-cross-start">
      <i class="sf-icon" aria-hidden="true">check_circle</i>
      <div class="sf-toast-container flex flex-col flex-1">
        <div class="sf-toast-wrap flex flex-col">
          <div class="sf-toast-text">Изменения сохранены</div>
          <div class="sf-toast-supporting-text">Операция завершилась успешно.</div>
        </div>
      </div>
    </div>
    <code class="text-1/2 color-on-surface-variant">sf-toast--success</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-toast sf-toast--warning flex items-cross-start">
      <i class="sf-icon" aria-hidden="true">warning</i>
      <div class="sf-toast-container flex flex-col flex-1">
        <div class="sf-toast-wrap flex flex-col">
          <div class="sf-toast-text">Соединение нестабильно</div>
          <div class="sf-toast-supporting-text">Часть данных может прийти позже.</div>
        </div>
      </div>
    </div>
    <code class="text-1/2 color-on-surface-variant">sf-toast--warning</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-toast sf-toast--error flex items-cross-start">
      <i class="sf-icon" aria-hidden="true">error</i>
      <div class="sf-toast-container flex flex-col flex-1">
        <div class="sf-toast-wrap flex flex-col">
          <div class="sf-toast-text">Не удалось сохранить</div>
          <div class="sf-toast-supporting-text">Повторите попытку позже.</div>
        </div>
      </div>
    </div>
    <code class="text-1/2 color-on-surface-variant">sf-toast--error</code>
  </div>
</div>

Время жизни

Без атрибута data-duration сообщение остаётся, пока его не закроют. data-duration задаёт время в миллисекундах, после которого сообщение закрывается само; отсчёт останавливается, пока указатель или фокус внутри сообщения. Сообщение с действием и сообщение об ошибке оставляйте постоянными: их легко не успеть прочитать.

HTML

<div class="grid grid-col-1 gap-3 max-w-xl" data-toast-lifetime-demo>
  <div class="flex flex-col gap-1">
    <div class="sf-toast sf-toast--neutral flex items-cross-start">
      <i class="sf-icon" aria-hidden="true">info</i>
      <div class="sf-toast-container flex flex-col flex-1">
        <div class="sf-toast-wrap flex flex-col">
          <div class="sf-toast-text">Постоянное сообщение</div>
          <div class="sf-toast-supporting-text">Остаётся, пока его не закроют.</div>
        </div>
      </div>
      <button type="button" class="sf-icon-button sf-icon-button--close sf-icon-button--on-surface sf-icon-button--link sf-icon-button--size-1/3" data-close aria-label="Закрыть сообщение">
        <span class="sf-close sf-close--size-1/3 flex justify-center items-center" aria-hidden="true"><span class="sf-close-icon"></span></span>
      </button>
    </div>
    <code class="text-1/2 color-on-surface-variant">без data-duration</code>
  </div>
  <div class="flex flex-col gap-1">
    <div data-toast-lifetime-slot>
    <div class="sf-toast sf-toast--success flex items-cross-start" data-duration="8000">
      <i class="sf-icon" aria-hidden="true">check_circle</i>
      <div class="sf-toast-container flex flex-col flex-1">
        <div class="sf-toast-wrap flex flex-col">
          <div class="sf-toast-text">Временное сообщение</div>
          <div class="sf-toast-supporting-text">Закрывается через 8 секунд; наведение и фокус останавливают отсчёт.</div>
        </div>
      </div>
      <button type="button" class="sf-icon-button sf-icon-button--close sf-icon-button--on-surface sf-icon-button--link sf-icon-button--size-1/3" data-close aria-label="Закрыть сообщение">
        <span class="sf-close sf-close--size-1/3 flex justify-center items-center" aria-hidden="true"><span class="sf-close-icon"></span></span>
      </button>
    </div>
    </div>
    <template data-toast-lifetime-template>
    <div class="sf-toast sf-toast--success flex items-cross-start" data-duration="8000">
      <i class="sf-icon" aria-hidden="true">check_circle</i>
      <div class="sf-toast-container flex flex-col flex-1">
        <div class="sf-toast-wrap flex flex-col">
          <div class="sf-toast-text">Временное сообщение</div>
          <div class="sf-toast-supporting-text">Закрывается через 8 секунд; наведение и фокус останавливают отсчёт.</div>
        </div>
      </div>
      <button type="button" class="sf-icon-button sf-icon-button--close sf-icon-button--on-surface sf-icon-button--link sf-icon-button--size-1/3" data-close aria-label="Закрыть сообщение">
        <span class="sf-close sf-close--size-1/3 flex justify-center items-center" aria-hidden="true"><span class="sf-close-icon"></span></span>
      </button>
    </div>
    </template>
    <code class="text-1/2 color-on-surface-variant">data-duration="8000"</code>
    <div>
      <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1/2" data-toast-lifetime-restore hidden>
        <span class="sf-button-text-container">Показать снова</span>
      </button>
    </div>
  </div>
</div>

JavaScript

document.querySelectorAll('[data-toast-lifetime-demo]').forEach((demo) => {
  const slot = demo.querySelector('[data-toast-lifetime-slot]');
  const template = demo.querySelector('[data-toast-lifetime-template]');
  const restore = demo.querySelector('[data-toast-lifetime-restore]');

  slot.addEventListener('sf-toast-close', () => {
    restore.hidden = false;
  });

  restore.addEventListener('click', () => {
    slot.replaceChildren(template.content.cloneNode(true));
    restore.hidden = true;
  });
});

Доступность

Сообщению, которое появляется динамически, задайте role="status" для обычного результата и role="alert" для срочной ошибки. Сообщению, которое есть на странице с первой загрузки, живая роль не нужна.
Смысл передаёт текст; цвет и иконка его только поддерживают.
Кнопке закрытия нужно доступное имя: aria-label="Закрыть сообщение".
Не кладите во временное сообщение обязательный шаг или сведения, без которых нельзя продолжить.
Если при закрытии фокус был внутри сообщения, приложение переносит его на следующий осмысленный элемент: компонент удаляет блок вместе с фокусом.

JavaScript

Скрипт компонента находит блоки .sf-toast при загрузке страницы и в добавленной позже разметке и обрабатывает нажатия внутри них:

Атрибут на кнопке	Что происходит
`data-action="значение"`	на блоке возникает событие `sf-toast-action`; сообщение остаётся
`data-close`	на блоке возникает событие `sf-toast-close`, затем блок удаляется

Оба события всплывают. sf-toast-action несёт в detail поля action (значение атрибута), toast и trigger; sf-toast-close — toast и trigger (при закрытии по времени trigger равен null). Недоступная кнопка (disabled или aria-disabled="true") событий не вызывает. На время удаления блок получает класс closing и плавно гаснет; при системной настройке уменьшения движения блок удаляется сразу. data-toast-action и data-toast-close — другие имена тех же атрибутов. Само действие выполняет приложение.

HTML

<section class="grid grid-col-1 gap-2 max-w-xl" aria-label="Интерактивный пример сообщения" data-toast-demo>
  <div data-toast-demo-slot>
    <div class="sf-toast sf-toast--success flex items-cross-start">
      <i class="sf-icon" aria-hidden="true">check_circle</i>
      <div class="sf-toast-container flex flex-col flex-1">
        <div class="sf-toast-wrap flex flex-col">
          <div class="sf-toast-text">Файл удалён</div>
          <div class="sf-toast-supporting-text">Действие можно отменить.</div>
        </div>
        <div class="sf-toast-bottom flex flex-wrap items-center">
          <button type="button" class="sf-button sf-button--link sf-button--primary sf-button--size-1/2" data-action="undo">
            <span class="sf-button-text-container">Отменить</span>
          </button>
        </div>
      </div>
      <button type="button" class="sf-icon-button sf-icon-button--close sf-icon-button--on-surface sf-icon-button--link sf-icon-button--size-1/3" data-close aria-label="Закрыть сообщение">
        <span class="sf-close sf-close--size-1/3 flex justify-center items-center" aria-hidden="true"><span class="sf-close-icon"></span></span>
      </button>
    </div>
  </div>
  <p class="m-0" role="status" data-toast-demo-result></p>
  <div>
    <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1/2" data-toast-demo-restore hidden>
      <span class="sf-button-text-container">Показать снова</span>
    </button>
  </div>
  <template data-toast-demo-template>
    <div class="sf-toast sf-toast--success flex items-cross-start">
      <i class="sf-icon" aria-hidden="true">check_circle</i>
      <div class="sf-toast-container flex flex-col flex-1">
        <div class="sf-toast-wrap flex flex-col">
          <div class="sf-toast-text">Файл удалён</div>
          <div class="sf-toast-supporting-text">Действие можно отменить.</div>
        </div>
        <div class="sf-toast-bottom flex flex-wrap items-center">
          <button type="button" class="sf-button sf-button--link sf-button--primary sf-button--size-1/2" data-action="undo">
            <span class="sf-button-text-container">Отменить</span>
          </button>
        </div>
      </div>
      <button type="button" class="sf-icon-button sf-icon-button--close sf-icon-button--on-surface sf-icon-button--link sf-icon-button--size-1/3" data-close aria-label="Закрыть сообщение">
        <span class="sf-close sf-close--size-1/3 flex justify-center items-center" aria-hidden="true"><span class="sf-close-icon"></span></span>
      </button>
    </div>
  </template>
</section>

JavaScript

document.querySelectorAll('[data-toast-demo]').forEach((demo) => {
  const slot = demo.querySelector('[data-toast-demo-slot]');
  const template = demo.querySelector('[data-toast-demo-template]');
  const result = demo.querySelector('[data-toast-demo-result]');
  const restore = demo.querySelector('[data-toast-demo-restore]');

  demo.addEventListener('sf-toast-action', (event) => {
    result.textContent = `Выбрано действие «${event.detail.action}». Сообщение осталось на странице.`;
  });

  demo.addEventListener('sf-toast-close', () => {
    result.textContent = 'Сообщение закрыто.';
    restore.hidden = false;
  });

  restore.addEventListener('click', () => {
    slot.replaceChildren(template.content.cloneNode(true));
    result.textContent = '';
    restore.hidden = true;
    slot.querySelector('[data-action]')?.focus();
  });
});

Функции SF.Toast:

Функция	Что делает
`SF.Toast.show(target, options)`	собирает сообщение и добавляет его в конец `target` (элемент или селектор); возвращает блок
`SF.Toast.create(options)`	собирает сообщение и возвращает блок, не добавляя его на страницу
`SF.Toast.dismiss(toast)`	закрывает сообщение так же, как кнопка `data-close`

JavaScript

SF.Toast.show('#toasts', {
  status: 'success',
  title: 'Ссылка скопирована',
  duration: 5000,
  role: 'status',
  closeLabel: 'Закрыть сообщение',
});

Параметры: status, icon (имя значка), title, supportingText, actionText и action (кнопка действия и её значение), closable (по умолчанию true), closeLabel, duration, role (status или alert). status принимает общие значения статуса: neutral, info, success, warning и error; прежние default и primary означают neutral и info, а неизвестное значение собирает нейтральное сообщение. Компонент также регистрирует класс Toast с теми же параметрами: SF.Loader.ready('Toast', callback) передаёт его после события sf-loader-init.

Уведомления страницы: `SF.notify`

Сообщение, которое должно появиться и исчезнуть, поднимают через SF.notify, а не ставят блок рядом с компонентом. У страницы одна область уведомлений, и все сообщения попадают в неё.

Пример уведомлений страницы

HTML

<section class="flex flex-wrap gap-2" aria-label="Уведомления страницы" data-notify-demo>
  <button type="button" class="sf-button sf-button--default sf-button--primary sf-button--size-1" data-notify="success">
    <span class="sf-button-text-container">Сохранить</span>
  </button>
  <button type="button" class="sf-button sf-button--outline sf-button--secondary sf-button--size-1" data-notify="error">
    <span class="sf-button-text-container">Ошибка оплаты</span>
  </button>
  <p class="text-1/2 color-on-surface-variant w-full" data-notify-log aria-live="polite"></p>
</section>

JavaScript

const demo = document.querySelector('[data-notify-demo]');
const log = demo.querySelector('[data-notify-log]');
const messages = {
  success: {status: 'success', title: 'Изменения сохранены', key: 'demo:saved'},
  error: {status: 'error', title: 'Оплата не прошла', text: 'Проверьте данные карты.', action: {label: 'Повторить', onSelect: () => {}}},
};

// Every message is announced on the document before it shows: a notification
// centre would record it here.
document.addEventListener('sf-notification', (event) => {
  log.textContent = `Записано: ${event.detail.title} (${event.detail.status}). В истории: ${SF.notifications.history().length + 1}.`;
});

demo.addEventListener('click', (event) => {
  const button = event.target.closest('[data-notify]');
  if (button) SF.notify(messages[button.dataset.notify]);
});

Параметры `SF.notify`

JavaScript

const handle = SF.notify({
  status: 'success',         // neutral, info, success, warning, error
  title: 'Пополнение выполнено',
  text: 'Средства поступят в течение минуты.',
  action: {label: 'Открыть', onSelect: (record) => {}},
  duration: 5000,            // 0 — до закрытия; без параметра — по статусу
  source: 'billing',         // кто поднял сообщение
  key: 'topup:42',           // сообщения с одним ключом считаются одним
});
handle.close();

Область стоит у края окна в верхнем слое страницы, по умолчанию внизу в конце строки. Она лежит и выше открытого модального окна, поэтому ошибку можно показать, не закрывая окно. SF.notifications.configure({placement: 'top-end', max: 4}) переносит её к другому углу (top-start, top-end, bottom-start, bottom-end) и задаёт, сколько сообщений видно сразу.
Сообщения встают стопкой с промежутком. Одновременно видно четыре, остальные ждут очереди. Повторное сообщение с тем же ключом (или тем же статусом, заголовком и текстом) не добавляется, а увеличивает счётчик ×2.
Без duration сообщение живёт пять секунд, предупреждение — восемь, ошибка — десять. Таймер останавливается, пока на сообщении указатель или фокус.
Ошибка объявляется сразу (role="alert"), остальные статусы — вежливо (role="status").
Перед показом каждое сообщение объявляется на документе событием sf-notification с detail: id, status, title, text, source, time. Центр уведомлений записывает его там; отмена события (preventDefault()) сохраняет запись, но не показывает сообщение. SF.notifications.history() возвращает последние пятьдесят записей страницы.

Компонент сообщений загружается при первом вызове SF.notify.

Классы

Что	Классы
Блок	`sf-toast`
Части	`sf-toast-bottom`, `sf-toast-container`, `sf-toast-supporting-text`, `sf-toast-text`, `sf-toast-wrap`
Модификаторы	`sf-toast--error`, `sf-toast--info`, `sf-toast--neutral`, `sf-toast--success`, `sf-toast--warning`
Устаревшие	`sf-toast--default` → `sf-toast--neutral`, `sf-toast--primary` → `sf-toast--info`

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Настройка

Эти переменные — поверхность настройки компонента. Их имена стабильны: переименовать или убрать такую переменную можно только через журнал изменений, с предупреждением, как атрибут. Framework их не задаёт, поэтому значение можно поставить на сам компонент (.sf-toast) или на любого предка. Переменные действуют на спокойный вид; наведение, фокус, нажатие, недоступность и ошибка рисуются поверх, поэтому состояния остаются видны.

Переменная	Что задаёт	По умолчанию
`--sf-toast-background-color`	Подложка поверх приподнятой поверхности уведомления. Её задаёт класс статуса (`sf-toast--neutral`, `sf-toast--info` и другие); без статуса подложки нет, и переменная не действует.	`var(--sf-surface-container)`; зависит от статуса
`--sf-toast-color`	Цвет заголовка и поясняющего текста.	`var(--sf-on-surface)`; зависит от статуса
`--sf-toast-border-color`	Цвет рамки.	`var(--sf-outline-variant)`
`--sf-toast-border-width`	Ширина рамки со всех сторон.	`var(--sf-px)`
`--sf-toast-radius`	Скругление углов.	`var(--sf-radius--surface)`
`--sf-toast-padding-inline`	Отступ до и после содержимого по строчной оси.	`var(--sf-space-1)`
`--sf-toast-padding-block`	Отступ над и под содержимым.	`var(--sf-space-1)`
`--sf-toast-gap`	Промежуток между значком, текстом и кнопкой закрытия.	`var(--sf-space-1/2)`

CSS

.sf-toast {
  --sf-toast-radius: 0;
}

Устройство

Остальные переменные — внутренняя проводка компонента: модификаторы задают им значения, а части их читают. Их имена и устройство могут меняться в любом выпуске, поэтому проект их не задаёт. Значение по умолчанию — из базового правила блока (.sf-toast); переменную без него задают только модификаторы.

Переменная	По умолчанию	Задаёт
`--sf-toast--background-color`	не задана; задают модификаторы, например `.sf-toast--neutral`: `var(--sf-toast-background-color, var(--sf-surface-container))`	`background-image`
`--sf-toast--content-color`	не задана; задают модификаторы, например `.sf-toast--neutral`: `var(--sf-toast-color, var(--sf-on-surface))`	`color`
`--sf-toast-bottom--background-color`	не задана; задают модификаторы, например `.sf-toast .sf-toast-bottom`: `transparent`	`background-color`
`--sf-toast-container--background-color`	не задана; задают модификаторы, например `.sf-toast .sf-toast-container`: `transparent`	`background-color`
`--sf-toast-container--gap`	не задана; задают модификаторы, например `.sf-toast .sf-toast-container`: `var(--sf-space-1/2)`	`gap`
`--sf-toast-supporting-text--color`	не задана; задают модификаторы, например `.sf-toast.sf-toast--neutral .sf-toast-supporting-text`: `var(--sf-toast-color, var(--sf-on-surface))`	`color`
`--sf-toast-supporting-text--font-family`	не задана; задают модификаторы, например `.sf-toast .sf-toast-supporting-text`: `var(--sf-text--family)`	`font-family`
`--sf-toast-supporting-text--font-size`	не задана; задают модификаторы, например `.sf-toast .sf-toast-supporting-text`: `var(--sf-text-size-1)`	`font-size`
`--sf-toast-supporting-text--font-weight`	не задана; задают модификаторы, например `.sf-toast .sf-toast-supporting-text`: `var(--sf-font-weight-regular)`	`font-weight`
`--sf-toast-supporting-text--line-height`	не задана; задают модификаторы, например `.sf-toast .sf-toast-supporting-text`: `var(--sf-text-height-1)`	`line-height`
`--sf-toast-text--color`	не задана; задают модификаторы, например `.sf-toast.sf-toast--neutral .sf-toast-text`: `var(--sf-toast-color, var(--sf-on-surface))`	`color`
`--sf-toast-text--font-family`	не задана; задают модификаторы, например `.sf-toast .sf-toast-text`: `var(--sf-text--family)`	`font-family`
`--sf-toast-text--font-size`	не задана; задают модификаторы, например `.sf-toast .sf-toast-text`: `var(--sf-text-size-1)`	`font-size`
`--sf-toast-text--font-weight`	не задана; задают модификаторы, например `.sf-toast .sf-toast-text`: `var(--sf-font-weight-medium)`	`font-weight`
`--sf-toast-text--line-height`	не задана; задают модификаторы, например `.sf-toast .sf-toast-text`: `var(--sf-text-height-1)`	`line-height`
`--sf-toast-wrap--background-color`	не задана; задают модификаторы, например `.sf-toast .sf-toast-wrap`: `transparent`	`background-color`
`--sf-toast-wrap--gap`	не задана; задают модификаторы, например `.sf-toast .sf-toast-wrap`: `var(--sf-space-1/4)`	`gap`

Навигация

Главное

Документация

Содержание

Всплывающие сообщения

Пример

Разметка

Варианты

Статус

Время жизни

Доступность

JavaScript

Уведомления страницы: `SF.notify`

Пример уведомлений страницы

Параметры `SF.notify`

Классы

Переменные

Настройка

Устройство

См. также

Настройки

Всплывающие сообщения

Пример

Разметка

Варианты

Статус

Время жизни

Доступность

JavaScript

Уведомления страницы: SF.notify

Пример уведомлений страницы

Параметры SF.notify

Классы

Переменные

Настройка

Устройство

См. также

Поиск по документации

Уведомления страницы: `SF.notify`

Параметры `SF.notify`