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

Анатомия

Тост состоит из контейнера и трёх зон: prepend с иконкой статуса, аватаром или индикатором загрузки, контента с заголовком и текстом и зоны действий. Свойство timer добавляет шкалу оставшегося времени.

Storybook

Вариации

Управление видимостью

Показывайте тост через v-model или слот activator — во втором случае компонент сам управляет своим состоянием. Тост закрывается автоматически через timeout (5000 мс по умолчанию); наведение курсора или фокус внутри тоста приостанавливают отсчёт, а на тач-экранах тост можно смахнуть.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsToast } from '@central-design-system/components';
import { ref } from 'vue';

const visible = ref(false);
</script>

<template>
  <div class="flex flex-wrap justify-center gap-2">
    <CdsButton text="Открыть через v-model" @click="visible = true" />
    <CdsToast v-model="visible" text="Изменения сохранены" />

    <CdsToast text="Черновик восстановлен">
      <template #activator="{ props }">
        <CdsButton text="Открыть через activator" variant="soft" color="brand" v-bind="props" />
      </template>
    </CdsToast>
  </div>
</template>

Статус

Свойство status подбирает цвет и иконку по смыслу сообщения: info, success, warning, danger, progress. Иконку можно заменить свойством icon или скрыть значением false.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsToast } from '@central-design-system/components';

const statuses = ['info', 'success', 'warning', 'danger', 'progress'] as const;
</script>

<template>
  <div class="flex flex-wrap justify-center gap-2">
    <CdsButton v-for="status in statuses" :key="status" :color="`status-${status}-surface`" variant="solid">
      {{ status }}
      <CdsToast activator="parent" :status="status" :text="`Уведомление со статусом ${status}`" />
    </CdsButton>
  </div>
</template>

Таймер

Свойство timeout задаёт время до автозакрытия в миллисекундах, -1 отключает его. Шкалу оставшегося времени включает свойство timer (true/top — сверху, bottom — снизу), reverse-timer разворачивает её направление, а timer-color меняет цвет.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsToast } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-wrap justify-center gap-2">
    <CdsToast timer :timeout="4000" text="Тост закроется через 4 секунды">
      <template #activator="{ props }">
        <CdsButton text="Таймер сверху" v-bind="props" />
      </template>
    </CdsToast>

    <CdsToast timer="bottom" reverse-timer :timeout="4000" text="Обратная шкала снизу">
      <template #activator="{ props }">
        <CdsButton text="Таймер снизу" variant="soft" color="brand" v-bind="props" />
      </template>
    </CdsToast>
  </div>
</template>

Позиция

Свойство location ставит тост в одну из шести позиций: сторона (top, bottom) плюс выравнивание (left, center, right). Поверх контента страницы тост выводит CdsOverlay.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsToast } from '@central-design-system/components';

const locations = ['top left', 'top center', 'top right', 'bottom left', 'bottom center', 'bottom right'] as const;
</script>

<template>
  <div class="grid grid-cols-3 justify-items-center gap-2">
    <CdsButton v-for="location in locations" :key="location" variant="soft" color="neutral">
      {{ location }}
      <CdsToast activator="parent" :location="location" :text="`Тост в позиции ${location}`" />
    </CdsButton>
  </div>
</template>

Контент и действия

Заголовок и текст задаются свойствами title и text, аватар перед контентом — prepend-avatar, а loading заменяет иконку индикатором загрузки. Слот actions добавляет кнопки: внутри него они по умолчанию получают variant="solid", color="inverse" и size="sm". Вертикальная раскладка (vertical) переносит действия под контент.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsToast } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-wrap justify-center gap-2">
    <CdsToast
      title="Черновик удалён"
      text="Черновик заявки №42 удалён без возможности восстановления"
      status="warning"
      :timeout="8000"
    >
      <template #activator="{ props }">
        <CdsButton text="С заголовком и действиями" v-bind="props" />
      </template>
      <template #actions="{ isActive }">
        <CdsButton text="Отменить" variant="soft" color="neutral" @click="isActive.value = false" />
      </template>
    </CdsToast>

    <CdsToast
      prepend-avatar="https://i.pravatar.cc/80?img=32"
      title="Ирина Соколова"
      text="Добавила комментарий к заказу"
    >
      <template #activator="{ props }">
        <CdsButton text="С аватаром" variant="soft" color="brand" v-bind="props" />
      </template>
    </CdsToast>

    <CdsToast vertical title="Файл загружается" text="Не закрывайте вкладку до завершения" loading :timeout="-1">
      <template #activator="{ props }">
        <CdsButton text="Вертикальный с загрузкой" variant="soft" color="brand" v-bind="props" />
      </template>
      <template #actions="{ isActive }">
        <CdsButton text="Скрыть" variant="soft" color="neutral" @click="isActive.value = false" />
      </template>
    </CdsToast>
  </div>
</template>

Слоты

Слоты замещают контент из пропсов, когда нужна своя разметка.

Слот	Описание
activator	Элемент, который открывает тост
header	Шапка на всю ширину тоста
prepend	Контент перед текстом. Замещает иконку, аватар и индикатор загрузки
title	Заголовок. Замещает текст из title
text	Текст. Замещает текст из text
default	Основной контент после текста
actions	Действия тоста

Рекомендации

Storybook

Сценарии использования

Отмена действия

Тост подтверждает удаление и даёт время передумать: кнопка «Отменить» в слоте actions возвращает документ, а шкала timer показывает, сколько времени осталось на решение.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsToast } from '@central-design-system/components';
import { ref } from 'vue';

const documents = ref(['Договор поставки', 'Счёт №112', 'Акт сверки']);
const visible = ref(false);
const removed = ref<{ name: string; index: number } | null>(null);

const remove = (index: number) => {
  removed.value = { name: documents.value[index], index };
  documents.value.splice(index, 1);
  visible.value = true;
};

const undo = () => {
  if (removed.value) {
    documents.value.splice(removed.value.index, 0, removed.value.name);
  }
  visible.value = false;
};
</script>

<template>
  <div class="flex w-[320px] m-auto flex-col gap-2">
    <div v-for="(name, index) in documents" :key="name" class="flex items-center justify-between">
      {{ name }}
      <CdsButton
        icon="delete"
        variant="soft"
        color="neutral"
        size="sm"
        :aria-label="`Удалить ${name}`"
        @click="remove(index)"
      />
    </div>

    <CdsToast v-model="visible" timer :timeout="6000" :text="removed ? `Документ «${removed.name}» удалён` : ''">
      <template #actions>
        <CdsButton text="Отменить" @click="undo" />
      </template>
    </CdsToast>
  </div>
</template>

Фоновая задача

Один тост сопровождает задачу от старта до результата. Пока идёт обработка, loading показывает индикатор, а timeout: -1 не даёт уведомлению исчезнуть; по завершении тот же тост переключается на status="success" и закрывается сам.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsToast } from '@central-design-system/components';
import { ref } from 'vue';

const visible = ref(false);
const loading = ref(false);

const generate = () => {
  visible.value = true;
  loading.value = true;

  setTimeout(() => {
    loading.value = false;
  }, 2500);
};
</script>

<template>
  <div class="flex justify-center">
    <CdsButton text="Сформировать отчёт" :disabled="visible && loading" @click="generate" />

    <CdsToast
      v-model="visible"
      :loading="loading"
      :status="loading ? undefined : 'success'"
      :timeout="loading ? -1 : 4000"
      :title="loading ? 'Формируем отчёт' : 'Отчёт готов'"
      :text="loading ? 'Это займёт несколько секунд' : 'Файл сохранён в разделе «Документы»'"
    />
  </div>
</template>

Ошибка с повтором

Ошибку не скрывайте автоматически: timeout: -1 держит тост, пока пользователь не отреагирует, а кнопка «Повторить» в actions запускает запрос заново.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsToast } from '@central-design-system/components';
import { ref } from 'vue';

const sending = ref(false);
const failed = ref(false);
const sent = ref(false);
let attempt = 0;

const send = () => {
  sending.value = true;
  failed.value = false;

  setTimeout(() => {
    sending.value = false;
    attempt += 1;

    if (attempt % 2 === 1) {
      failed.value = true;
    } else {
      sent.value = true;
    }
  }, 1500);
};
</script>

<template>
  <div class="flex justify-center">
    <CdsButton text="Отправить заявку" :loading="sending" @click="send" />

    <CdsToast
      v-model="failed"
      status="danger"
      :timeout="-1"
      title="Не удалось отправить заявку"
      text="Сервер не ответил. Попробуйте ещё раз"
    >
      <template #actions>
        <CdsButton text="Повторить" @click="send" />
      </template>
    </CdsToast>

    <CdsToast v-model="sent" status="success" text="Заявка отправлена" />
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
absolute	boolean | undefined	—	Указывает, что элемент должен быть позиционирован абсолютно, а не фиксированно. Это может быть полезно для оверлеев, которые должны быть ограничены определенной областью, например, внутри контейнера с position: relative.
activator	(string & {}) | Element | "parent" | ComponentPublicInstance | undefined	—	Элемент, который будет активировать компонент
activatorProps	Record<string, any> | undefined	{}	Свойства для элемента активатора
attach	string | boolean | Element | undefined	—	Указывает, в какой элемент DOM следует переместить содержимое overlay. Может быть прямой ссылкой на элемент, строкой querySelector или значением true для отключения перемещения. По умолчанию используется элемент body. Как правило, не рекомендуется изменять это свойство, за исключением крайних случаев: алгоритм позиционирования по умолчанию должен справляться с большинством сценариев лучше, чем это возможно без перемещения, и может возникнуть непредвиденное поведение, если меню окажется дочерним элементом своего активатора.
bgColor	string | undefined	—	Цвет фона компонента
closeDelay	string | number | undefined	—	Время ожидания в миллисекундах перед закрытием компонента. Работает только с параметром open-on-hover.
closeOnBack	boolean | undefined	false	Закрывает содержимое оверлея при нажатии кнопки «Назад» в браузере или вызове $router.back(), отменяя исходную навигацию. persistent оверлеи отменяют навигацию и анимируются так, как будто по ним щелкнули за пределами оверлея, вместо того чтобы закрываться.
closeOnContentClick	boolean | undefined	—	Скрыть компонент по клику на контент
collapsed	{ width: number; height: number; } | undefined	—	Свёрнутое состояние тоста в очереди: размеры, до которых сворачивается тост. Управляется компонентом CdsToastQueue.
contained	boolean | undefined	—	Ограничивает размер компонента и сетки в соответствии с его смещенным родительским элементом. Подразумевает использование свойств absolute и attach. (Примечание: родительский элемент должен иметь свойство position: relative.)
content	string | number | undefined	—	Контент, отображаемый в компоненте.
contentClass	any	—	Применяет пользовательский класс к отдельному элементу. Это удобно, поскольку содержимое перемещается в начало компонента cds-app (если не указан параметр attach) и не может быть выделено с помощью классов, переданных непосредственно в компонент.
contentProps	any	—	Применяет кастомные свойства (props) к перемещаемому контенту
disabled	boolean | null | undefined	null	Заблокированное состояние
eager	boolean | undefined	—	Принудительно рендерит содержимое компонента при его использовании. Это полезно, если у вас есть контент, который не отображается в DOM, но который необходимо проиндексировать для SEO.
height	string | number | undefined	—	Высота компонента
icon	false | IconValue | undefined	null	Иконка перед контентом. По умолчанию берётся из status; false скрывает иконку.
loading	boolean | undefined	—	Отображает индикатор загрузки вместо иконки.
location	Anchor | null | undefined	'top center'	Позиционирование элемента относительно его контейнера. Например, "top left", "center", "bottom right" и т.д.
locationStrategy	"static" | "connected" | LocationStrategyFunction | undefined	'static'	Определяет способ позиционирования содержимого оверлея. По умолчанию используется значение static, при котором содержимое центрируется в контейнере. Используйте connected для привязки к элементу-активатору.
maxHeight	string | number | undefined	—	Максимальная высота компонента
maxWidth	string | number | undefined	—	Максимальная ширина компонента
minHeight	string | number | undefined	—	Минимальная высота компонента
minWidth	string | number | undefined	—	Минимальная ширина компонента
modelValue	boolean | undefined	—	Значение компонента v-model. Если компонент поддерживает свойство multiple, по умолчанию используется пустой массив.
opacity	string | number | undefined	—	Прозрачность элемента «scrim». Применяется только в том случае, если св-во scrim=true.
openDelay	string | number | undefined	—	Время ожидания в миллисекундах перед открытием компонента. Работает только с параметром open-on-hover.
openOnClick	boolean | undefined	—	Показать компонент по клику на активатор
openOnFocus	boolean | undefined	—	Показать компонент по фокусу на активатор
openOnHover	boolean | undefined	—	Показать компонент по наведению на активатор
origin	Anchor | "auto" | "overlap" | undefined	'auto'	Устанавливает точку привязки для содержимого наложения, которая выравнивается по точке привязки «location» на объекте-цели. При значении «auto» используется противоположная сторона точки «location». При значении «overlap» используется та же точка привязки, в результате чего наложение перекрывает объект-цель. Также задает значение CSS-свойства transform-origin для transitions enter/leave.
position	"absolute" | "static" | "fixed" | "relative" | "sticky" | undefined	—	CSS-позиционирование компонента — значение свойства position
prependAvatar	string | undefined	—	Источник изображения аватара перед контентом. Имеет приоритет над иконкой.
queueGap	number | undefined	—	Отступ между тостами в очереди в пикселях. Управляется компонентом CdsToastQueue.
queueIndex	number | undefined	—	Индекс тоста в очереди. Управляется компонентом CdsToastQueue.
reverseTimer	boolean | undefined	—	Обратное направление шкалы таймера: заполняется, а не убывает.
status	"progress" | "danger" | "success" | "warning" | "info" | undefined	'info'	Семантический статус — определяет цвет и дефолтную иконку.
target	(string & {}) | Element | "parent" | ComponentPublicInstance | "cursor" | [x: number, y: number] | undefined	—	Если для параметра locationStrategy задано значение «connected», необходимо указать элемент или массив координат x, y, относительно которых должен располагаться оверлей. По умолчанию в качестве такого элемента используется элемент-активатор.
text	string | number | undefined	—	Текст, отображаемый в компоненте.
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента
timeout	string | number | undefined	5000	Время в миллисекундах до автоматического скрытия тоста. Значение -1 отключает автозакрытие.
timer	boolean | "top" | "bottom" | undefined	false	Отображает шкалу таймера до автозакрытия: true/top — сверху, bottom — снизу.
timerColor	string | undefined	—	Цвет шкалы таймера.
title	string | undefined	—	Заголовок тоста.
transition	string | boolean | (TransitionProps & { component?: Component | undefined; }) | null | undefined	'cds-toast-transition'	Анимация перехода
vertical	boolean | undefined	—	Вертикальная раскладка: действия переносятся под контент.
width	string | number | undefined	—	Ширина компонента
zIndex	string | number | undefined	2000	Значение z-index для компонента.

События

Имя	Тип	Описание
afterEnter	[]	Событие завершения анимации появления.
afterLeave	[]	Событие завершения анимации скрытия.
update:modelValue	[value: boolean]	Событие изменения состояния видимости тоста.

Слоты

Имя	Тип	Описание
actions	{ isActive: Ref<boolean, boolean>; }	Слот действий тоста.
activator	{ isActive: boolean; props: Record<string, any>; }	Слот для элемента, который будет выступать в роли активатора тоста.
default	any	Основной контент тоста.
header	any	Слот шапки тоста на всю ширину.
prepend	any	Слот перед контентом (иконка, аватар или индикатор загрузки).
text	any	Слот текста.
title	any	Слот заголовка.

Exposed

Имя	Тип	Описание
activatorEl	HTMLElement | undefined	DOM-элемент активатора.
activatorRef	TemplateRef	Template ref для назначения активатора вручную.
animateClick	() => void	Запускает bounce-анимацию контента — как при клике мимо persistent-оверлея.
contentEl	HTMLElement | undefined	DOM-элемент контента оверлея.
globalTop	boolean	Является ли оверлей верхним в глобальном стеке открытых оверлеев.
rootEl	HTMLElement | undefined	Корневой DOM-элемент оверлея.
scrimEl	HTMLElement | undefined	DOM-элемент подложки (scrim), затемняющей страницу.
targetEl	HTMLElement | undefined	DOM-элемент цели позиционирования.
targetRef	TemplateRef	Template ref для назначения цели позиционирования вручную.
updateLocation	((e: Event) => void) | undefined	Пересчитывает позицию контента относительно цели.