For pop-up messages above the page that disappear on their own take CdsToast. For a short status label in a row or a card — CdsTag.

Anatomy

A notification consists of a status icon, a content column — heading, text and actions — and a close button. Every part can be replaced by the slot of the same name.

Storybook

Variations

Statuses

The status prop sets the semantics of the message — its color and its icon. The default status is 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>

Display modes

The variant prop changes the styling: default — with a border, flat — without a border, compact — a single line, important — a neutral background and a shadow for showing above the content.

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" puts the icon, the text and the actions on one line and hides the heading. It fits tight places: a filter panel, a table row, the footer of a card.

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>

Icons

By default the icon matches the status. The icon prop replaces it with any icon from the pack, and the value false removes it altogether.

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>

Closing

The closable prop adds a close button; the visibility of the notification is controlled through v-model. A click on the button also emits click:close.

The notification appears and leaves smoothly: it fades out first, then collapses in height, so neighbouring blocks slide without a jump. click:close is emitted right at the click, while update:modelValue arrives after the leave has finished, so you can remove the item from a list in the handler without cutting the animation short. Set the spacing between notifications in a list with margin: it collapses together with the block, unlike gap, which makes a jump on leave. Under prefers-reduced-motion only opacity changes.

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>

Slots

Slots replace the content coming from props when you need your own markup.

Slot	Description
prepend	Content before the text. Replaces the status icon
title	Heading. Replaces the text from title
text	Message text. Replaces the text from text
default	Arbitrary content after the text
actions	Actions (buttons, links) below the text
append	Content after the content column
close	Close button. Receives props to bind to your own element

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>

Guidelines

Storybook

Scenarios

Form submission result

After a successful request a notification with the success status appears through v-model and confirms the result. The closable prop lets the user dismiss the message once it is read.

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>

A warning with an action

A warning notification does not just report a problem — it offers a solution right away with a button in the actions slot. On click the status changes to progress, and after the server responds — to success: the user sees the whole course of the operation in a single block.

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>

Loading error with a retry

If the data failed to load, a danger notification explains what happened and offers to repeat the request. The progress status shows that the retry is already running.

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

Props

Name	Type	Default	Description
bgColor	string | undefined	—	Background color of the component
closable	boolean | undefined	—	Adds a close button that hides the notification.
closeIcon	IconValue | undefined	'close'	Icon of the close button.
closeLabel	string | undefined	'$cds.close'	Accessible label (aria-label) for the close button.
content	string | number | undefined	—	Content displayed in the component.
icon	false | IconValue | undefined	null	Icon before the content. Taken from status by default; false hides the icon.
modelValue	boolean | undefined	true	Visibility of the notification (v-model). When false, the notification is not rendered.
status	"progress" | "danger" | "success" | "warning" | "info" | undefined	'info'	Semantic status — drives the color and the default icon.
tag	string | JSXComponent<any> | undefined	'div'	Custom HTML tag or component to render
text	string | number | undefined	—	Text displayed in the component.
textColor	string | undefined	—	Text color of the component
theme	string | undefined	—	Component theme
title	string | undefined	—	Notification heading.
variant	"default" | "flat" | "compact" | "important" | undefined	'default'	Display mode: default — regular; flat — borderless; compact — single line without a heading; important — neutral background and a shadow, where the status only drives the content colors.

Events

Name	Type	Description
click:close	[event: MouseEvent]	Click on the close button.
update:modelValue	[value: boolean]	The visibility of the notification changed. On close by the button it arrives after the leave animation ends, not at the click.

Slots

Name	Type	Description
actions	any	Slot for actions (buttons, links) below the text.
append	any	Slot after the content.
close	{ props: Record<string, any>; }	Close button slot; receives props to bind to your own element.
default	any	Main content of the notification (complements text).
prepend	any	Slot before the content (the status icon by default).
text	any	Text slot (instead of the text prop).
title	any	Heading slot (instead of the title prop).