Для всплывающих сообщений поверх страницы, которые исчезают сами, возьмите CdsToast. Для короткой метки статуса в строке или карточке — CdsTag.

Анатомия

Уведомление состоит из иконки статуса, контентной колонки — заголовок, текст и действия — и кнопки закрытия. Каждую часть можно заменить одноимённым слотом.

Storybook

Вариации

Статусы

Свойство status задаёт семантику сообщения — цвет и иконку. Статус по умолчанию — info.

Sandbox Storybook

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

const statuses = CdsNotification.constants.statuses;
</script>

<template>
  <div class="flex flex-col gap-2 max-w-[640px] m-auto">
    <CdsNotification
      v-for="status in statuses"
      :key="status"
      :status="status"
      title="Заголовок уведомления"
      text="Описание события, на которое стоит обратить внимание"
    />
  </div>
</template>

Режимы отображения

Свойство variant меняет оформление: default — с рамкой, flat — без рамки, compact — однострочный, important — нейтральный фон и тень для показа поверх контента.

Sandbox Storybook

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

const variants = CdsNotification.constants.variants;
</script>

<template>
  <div class="flex flex-col gap-4 max-w-[720px] m-auto">
    <div v-for="variant in variants" :key="variant" class="flex items-center gap-2">
      <span class="w-[96px] text-content-secondary text-100">{{ variant }}</span>
      <CdsNotification
        :variant="variant"
        title="Заголовок уведомления"
        text="Описание события, на которое стоит обратить внимание"
        closable
        class="flex-1"
      />
    </div>
  </div>
</template>

variant="compact" собирает иконку, текст и действия в одну линию, заголовок не отображается. Подходит для узких мест: панель фильтров, строка таблицы, подвал карточки.

Sandbox Storybook

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

const statuses = CdsNotification.constants.statuses;
</script>

<template>
  <div class="flex flex-col gap-2 w-[415px] m-auto">
    <CdsNotification
      v-for="status in statuses"
      :key="status"
      :status="status"
      variant="compact"
      text="Текст уведомления"
      closable
    >
      <template #actions>
        <CdsButton size="sm" text="Кнопка" />
      </template>
    </CdsNotification>
  </div>
</template>

Иконки

По умолчанию иконка соответствует статусу. Свойство icon заменяет её любой иконкой из набора, а значение false убирает совсем.

Sandbox Storybook

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

<template>
  <div class="flex flex-col gap-2 max-w-[640px] m-auto">
    <CdsNotification
      status="success"
      icon="trophy"
      title="Вы выиграли торги"
      text="Иконка задана пропом icon вместо иконки статуса"
    />
    <CdsNotification :icon="false" title="Без иконки" text="Значение icon: false скрывает иконку статуса" />
  </div>
</template>

Закрытие

Свойство closable добавляет кнопку закрытия, видимость уведомления контролируется через v-model. Клик по кнопке дополнительно эмитит click:close.

Уведомление появляется и уходит плавно: сначала затухает, затем схлопывается по высоте, и соседние блоки сдвигаются без скачка. click:close приходит сразу по клику, а update:modelValue — после завершения ухода, поэтому элемент можно удалять из списка в обработчике, не обрывая анимацию. Промежуток между уведомлениями в списке задавайте через margin: он схлопывается вместе с блоком, в отличие от gap, который при уходе даёт скачок. При prefers-reduced-motion меняется только прозрачность.

Sandbox Storybook

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

const initial = [
  { id: 1, title: 'Черновик сохранён', text: 'Изменения доступны только вам' },
  { id: 2, title: 'Лимит почти исчерпан', text: 'Осталось 2 из 10 запросов' },
  { id: 3, title: 'Документы загружены', text: 'Файлы проходят проверку' }
];

const items = ref(initial.map((item) => ({ ...item })));

function remove(id: number) {
  items.value = items.value.filter((item) => item.id !== id);
}
</script>

<template>
  <div class="max-w-[640px] m-auto">
    <CdsNotification
      v-for="item in items"
      :key="item.id"
      class="mb-2"
      :title="item.title"
      :text="item.text"
      closable
      @update:model-value="remove(item.id)"
    />
    <CdsButton v-if="!items.length" text="Вернуть уведомления" @click="items = initial.map((item) => ({ ...item }))" />
  </div>
</template>

Слоты

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

Слот	Описание
prepend	Контент перед текстом. Замещает иконку статуса
title	Заголовок. Замещает текст из title
text	Текст сообщения. Замещает текст из text
default	Произвольный контент после текста
actions	Действия (кнопки, ссылки) под текстом
append	Контент после контентной колонки
close	Кнопка закрытия. Получает props для привязки к своему элементу

Sandbox Storybook

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

<template>
  <CdsNotification class="max-w-[640px] m-auto">
    <template #title> Заголовок уведомления </template>
    <template #text> Описание уведомления, на которое пользователь <strong>должен обратить внимание</strong> </template>
    <template #actions>
      <CdsButton text="Опубликовать" />
    </template>
    <template #close="{ props }">
      <CdsFunctionalButton v-bind="props" />
    </template>
  </CdsNotification>
</template>

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

Storybook

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

Результат отправки формы

После успешного запроса уведомление со статусом success появляется через v-model и подтверждает результат. Свойство closable даёт пользователю убрать сообщение, когда оно прочитано.

Sandbox Storybook

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

const email = ref('');
const loading = ref(false);
const sent = ref(false);

async function submit() {
  loading.value = true;
  sent.value = false;

  // Имитация запроса к серверу
  await new Promise((resolve) => setTimeout(resolve, 1200));

  loading.value = false;
  sent.value = true;
}
</script>

<template>
  <CdsForm class="flex flex-col gap-2 w-[350px] m-auto" @submit.prevent="submit">
    <CdsNotification
      v-model="sent"
      status="success"
      title="Приглашение отправлено"
      :text="`Письмо со ссылкой ушло на ${email || 'указанную почту'}`"
      closable
    />

    <CdsTextInput v-model="email" label="Рабочая почта" placeholder="name@company.ru" />

    <CdsButton class="self-start" type="submit" text="Отправить приглашение" :loading="loading" />
  </CdsForm>
</template>

Предупреждение с действием

Уведомление warning не просто сообщает о проблеме, а сразу предлагает решение кнопкой в слоте actions. По клику статус меняется на progress, а после ответа сервера — на success: пользователь видит весь ход операции в одном блоке.

Sandbox Storybook

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

type Step = 'warning' | 'progress' | 'success';

const step = ref<Step>('warning');

const content: Record<Step, { title: string; text: string }> = {
  warning: {
    title: 'Почта не подтверждена',
    text: 'Подтвердите почту, чтобы получать уведомления о ходе торгов'
  },
  progress: {
    title: 'Отправляем письмо…',
    text: 'Обычно это занимает меньше минуты'
  },
  success: {
    title: 'Письмо отправлено',
    text: 'Проверьте входящие на name@company.ru и перейдите по ссылке'
  }
};

async function resend() {
  step.value = 'progress';

  // Имитация запроса к серверу
  await new Promise((resolve) => setTimeout(resolve, 1500));

  step.value = 'success';
}
</script>

<template>
  <div class="max-w-[640px] m-auto">
    <CdsNotification :status="step" :title="content[step].title" :text="content[step].text">
      <template v-if="step === 'warning'" #actions>
        <CdsButton size="sm" variant="soft" color="brand" text="Отправить письмо ещё раз" @click="resend" />
      </template>
    </CdsNotification>
  </div>
</template>

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

Если данные не загрузились, уведомление danger объясняет, что произошло, и предлагает повторить запрос. Статус progress показывает, что повтор уже идёт.

Sandbox Storybook

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

type Step = 'danger' | 'progress' | 'success';

const step = ref<Step>('danger');

const content: Record<Step, { title: string; text: string }> = {
  danger: {
    title: 'Не удалось загрузить список закупок',
    text: 'Сервер не ответил вовремя — данные могли устареть'
  },
  progress: {
    title: 'Обновляем данные…',
    text: 'Запрашиваем актуальный список закупок'
  },
  success: {
    title: 'Данные обновлены',
    text: 'Список закупок актуален'
  }
};

async function retry() {
  step.value = 'progress';

  // Имитация повторного запроса
  await new Promise((resolve) => setTimeout(resolve, 1500));

  step.value = 'success';
}
</script>

<template>
  <div class="max-w-[640px] m-auto">
    <CdsNotification :status="step" :title="content[step].title" :text="content[step].text">
      <template v-if="step === 'danger'" #actions>
        <CdsButton size="sm" variant="soft" color="brand" text="Повторить" @click="retry" />
      </template>
    </CdsNotification>
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
bgColor	string | undefined	—	Цвет фона компонента
closable	boolean | undefined	—	Добавляет кнопку закрытия, скрывающую уведомление.
closeIcon	IconValue | undefined	'close'	Иконка кнопки закрытия.
closeLabel	string | undefined	'$cds.close'	Доступная подпись (aria-label) для кнопки закрытия.
content	string | number | undefined	—	Контент, отображаемый в компоненте.
icon	false | IconValue | undefined	null	Иконка перед контентом. По умолчанию берётся из status; false скрывает иконку.
modelValue	boolean | undefined	true	Видимость уведомления (v-model). При false уведомление не отображается.
status	"progress" | "danger" | "success" | "warning" | "info" | undefined	'info'	Семантический статус — определяет цвет и дефолтную иконку.
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
text	string | number | undefined	—	Текст, отображаемый в компоненте.
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента
title	string | undefined	—	Заголовок уведомления.
variant	"default" | "flat" | "compact" | "important" | undefined	'default'	Режим отображения: default — обычный; flat — без рамки; compact — однострочный без заголовка; important — нейтральный фон и тень, статус задаёт только цвета контента.

События

Имя	Тип	Описание
click:close	[event: MouseEvent]	Клик по кнопке закрытия.
update:modelValue	[value: boolean]	Изменение видимости уведомления. При закрытии кнопкой приходит после завершения анимации ухода, а не в момент клика.

Слоты

Имя	Тип	Описание
actions	any	Слот действий (кнопки, ссылки) под текстом.
append	any	Слот после контента.
close	{ props: Record<string, any>; }	Слот кнопки закрытия; получает props для привязки к своему элементу.
default	any	Основной контент уведомления (дополняет text).
prepend	any	Слот перед контентом (по умолчанию — иконка статуса).
text	any	Слот текста (вместо пропа text).
title	any	Слот заголовка (вместо пропа title).