The component exists only for a smooth migration from CDS 3 and will be removed. For new scenarios use CdsToast.

Variations

Controlling the display

Visibility is controlled through v-model or the activator slot — the element inside the slot opens the notification on click. The text comes from the text prop.

Sandbox Storybook

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

<template>
  <div class="flex justify-center">
    <CdsNotificationAlert text="Изменения сохранены">
      <template #activator="{ props }">
        <CdsButton text="Показать уведомление" v-bind="props" />
      </template>
    </CdsNotificationAlert>
  </div>
</template>

Statuses

The status prop sets the color of the content and the icon: info, success, warning, danger, progress. The icon can be replaced by the icon prop or hidden with the value false.

Sandbox Storybook

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

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

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

Positions

The location prop sets the position on the screen: the side (top, bottom) and the alignment (left, center, right).

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsNotificationAlert } 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 }}
      <CdsNotificationAlert activator="parent" :location="location" :text="'Уведомление в позиции ' + location" />
    </CdsButton>
  </div>
</template>

Auto-closing

The timeout prop controls the auto-close delay in milliseconds, 5000 by default. The values -1 and 0 turn auto-closing off — the notification stays until the user closes it (closable). Hovering the cursor and focusing inside pause the countdown.

Sandbox Storybook

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

<template>
  <div class="flex justify-center gap-2">
    <CdsNotificationAlert :timeout="4000" text="Уведомление закроется через 4 секунды">
      <template #activator="{ props }">
        <CdsButton text="Закроется через 4 секунды" v-bind="props" />
      </template>
    </CdsNotificationAlert>
    <CdsNotificationAlert :timeout="-1" closable status="info" text="Останется до закрытия вручную">
      <template #activator="{ props }">
        <CdsButton text="Без автозакрытия" variant="soft" color="brand" v-bind="props" />
      </template>
    </CdsNotificationAlert>
  </div>
</template>

Scenarios

Undoing an action

After an irreversible operation the notification gives a short window to undo it: the button in the actions slot closes it through v-model, and an increased timeout leaves time to change one's mind.

Sandbox Storybook

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

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

<template>
  <div class="flex justify-center">
    <CdsButton text="Удалить черновик" variant="soft" color="brand" @click="isActive = true" />
    <CdsNotificationAlert
      v-model="isActive"
      title="Черновик удалён"
      text="Черновик заявки №42 удалён без возможности восстановления"
      status="warning"
      closable
      :timeout="8000"
    >
      <template #actions>
        <CdsButton text="Отменить" variant="soft" color="neutral" @click="isActive = false" />
      </template>
    </CdsNotificationAlert>
  </div>
</template>

A stack of notifications

Every instance is an independent overlay: notifications sharing a position pile up into a vertical stack. On close (update:model-value → false) remove the item from the list.

Sandbox Storybook

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

const statuses = CdsNotificationAlert.constants.statuses;

type Notification = {
  id: string;
  modelValue: boolean;
  status: (typeof statuses)[number];
  text: string;
  location: Anchor;
  closable: boolean;
};

const notifications = reactive<Notification[]>([]);
let uid = 0;

function addNotification(text: string, location: Anchor) {
  notifications.push({
    id: String(uid++),
    modelValue: true,
    status: statuses[Math.floor(Math.random() * statuses.length)],
    text,
    location,
    closable: true
  });
}

function onUpdateModelValue(value: boolean, id: string) {
  if (value) return;

  const index = notifications.findIndex((notification) => notification.id === id);
  if (index !== -1) notifications.splice(index, 1);
}
</script>

<template>
  <div class="flex gap-4 justify-around">
    <CdsButton text="Сверху слева" @click="addNotification('Тестовое уведомление', 'top left')" />
    <CdsButton
      text="Снизу справа"
      variant="soft"
      color="brand"
      @click="addNotification('Тестовое уведомление', 'bottom right')"
    />
    <CdsNotificationAlert
      v-for="notification in notifications"
      :key="notification.id"
      title="Заголовок"
      v-bind="notification"
      @update:model-value="(value) => onUpdateModelValue(value, notification.id)"
    >
      <template #actions>
        <CdsButton text="Кнопка" variant="soft" color="neutral" />
      </template>
    </CdsNotificationAlert>
  </div>
</template>

API

Props

Name	Type	Default	Description
absolute	boolean | undefined	—	Positions the element absolutely instead of fixed. This is useful for overlays that must stay inside a certain area, for example inside a container with position: relative.
activator	(string & {}) | Element | "parent" | ComponentPublicInstance | undefined	—	The element that activates the component
activatorProps	Record<string, any> | undefined	{}	Props for the activator element
attach	string | boolean | Element | undefined	—	Sets the DOM element the overlay content is moved to. It accepts a direct element reference, a querySelector string, or true to disable moving. By default the body element is used. Changing this prop is usually not recommended except for edge cases: the default positioning algorithm handles most scenarios better than it can without moving, and unexpected behavior may appear if the menu ends up being a child of its activator.
bgColor	string | undefined	—	Background color of the component
closable	boolean | undefined	—	Adds a close button that hides the notification.
closeDelay	string | number | undefined	—	Delay in milliseconds before the component closes. Works only together with open-on-hover.
closeIcon	IconValue | undefined	'close'	Icon of the close button.
closeLabel	string | undefined	'$cds.close'	Accessible label (aria-label) for the close button.
closeOnBack	boolean | undefined	false	Closes the overlay content when the browser Back button is pressed or $router.back() is called, cancelling the original navigation. persistent overlays cancel the navigation and animate as if they were clicked outside instead of closing.
closeOnContentClick	boolean | undefined	—	Hide the component on a click on the content
contained	boolean | undefined	—	Limits the size of the component and of its grid to the offset parent. Implies the absolute and attach props. (Note: the parent element must have position: relative.)
content	string | number | undefined	—	Content displayed in the component.
contentClass	any	—	Applies a custom class to the content element. This is handy because the content is moved to the beginning of the cds-app component (unless attach is set) and cannot be selected with classes passed to the component directly.
contentProps	any	—	Applies custom props to the moved content
disabled	boolean | null | undefined	null	Disabled state
eager	boolean | undefined	—	Renders the content of the component right away. Useful when you have content that is not in the DOM but has to be indexed for SEO.
height	string | number | undefined	—	Component height
icon	false | IconValue | undefined	null	Icon before the content. Taken from status by default; false hides the icon.
location	Anchor | null | undefined	'top center'	Position of the element relative to its container, for example "top left", "center", "bottom right".
locationStrategy	"static" | "connected" | LocationStrategyFunction | undefined	'static'	Sets the way the overlay content is positioned. By default static is used, which centers the content in its container. Use connected to attach the content to the activator element.
maxHeight	string | number | undefined	—	Maximum component height
maxWidth	string | number | undefined	—	Maximum component width
minHeight	string | number | undefined	—	Minimum component height
minWidth	string | number | undefined	—	Minimum component width
modelValue	boolean | undefined	—	The v-model value of the component. If the component supports the multiple prop, an empty array is used by default.
opacity	string | number | undefined	—	Opacity of the scrim element. Applies only when scrim=true.
openDelay	string | number | undefined	—	Delay in milliseconds before the component opens. Works only together with open-on-hover.
openOnClick	boolean | undefined	—	Show the component on a click on the activator
openOnFocus	boolean | undefined	—	Show the component when the activator gets focus
openOnHover	boolean | undefined	—	Show the component on hover over the activator
origin	Anchor | "auto" | "overlap" | undefined	'auto'	Sets the anchor point of the overlay content that is aligned with the location anchor of the target. With "auto" the opposite side of the location point is used. With "overlap" the same anchor point is used, so the overlay overlaps the target. It also sets the CSS transform-origin property for the enter/leave transitions.
position	"absolute" | "static" | "fixed" | "relative" | "sticky" | undefined	—	CSS positioning of the component — the value of the position property
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
target	(string & {}) | Element | "parent" | ComponentPublicInstance | "cursor" | [x: number, y: number] | undefined	—	When locationStrategy is set to "connected", specify the element or the array of x, y coordinates the overlay is positioned against. By default the activator element is used.
text	string | number | undefined	—	Text displayed in the component.
textColor	string | undefined	—	Text color of the component
theme	string | undefined	—	Component theme
timeout	string | number | undefined	5000	Delay in milliseconds before the notification hides automatically. The values -1 and 0 turn auto-closing off.
title	string | undefined	—	Notification heading.
transition	string | boolean | (TransitionProps & { component?: Component | undefined; }) | null | undefined	'notification-transition'	Transition animation
variant	"default" | "flat" | "compact" | "important" | undefined	'important'	Appearance of the notification. important by default — an elevated surface with a shadow (the CdsNotificationAlert look).
width	string | number | undefined	—	Component width
zIndex	string | number | undefined	2000	The z-index value of the component.

Events

Name	Type	Description
click:close	[event: MouseEvent]	Click on the close button.
update:modelValue	[value: boolean]	The visibility of the notification changed.

Slots

Name	Type	Description
actions	any	Slot for actions (buttons, links) below the text.
activator	{ isActive: boolean; props: Record<string, any>; }	Activator slot that controls the display of the notification.
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).

Exposed

Name	Type	Description
activatorEl	HTMLElement | undefined	The DOM element of the activator.
activatorRef	TemplateRef	Template ref for assigning the activator manually.
animateClick	() => void	Runs the bounce animation of the content — the same as on a click outside a persistent overlay.
contentEl	HTMLElement | undefined	The DOM element of the overlay content.
globalTop	boolean	Whether the overlay is the top one in the global stack of open overlays.
rootEl	HTMLElement | undefined	The root DOM element of the overlay.
scrimEl	HTMLElement | undefined	The DOM element of the scrim that dims the page.
targetEl	HTMLElement | undefined	The DOM element of the positioning target.
targetRef	TemplateRef	Template ref for assigning the positioning target manually.
updateLocation	((e: Event) => void) | undefined	Recalculates the position of the content relative to the target.