Для короткого сообщения о результате операции подойдёт CdsToast, а пока данные ещё загружаются, покажите CdsSkeletonLoader вместо пустого состояния.

Анатомия

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

Storybook

Вариации

Наполнение

У каждой текстовой зоны свой проп: headline — крупный акцент («404», «Пусто»), title — суть ситуации, text — подробности и подсказка, что делать. Ширину текста ограничивает text-width (по умолчанию 500), чтобы длинное описание не растягивалось на весь экран.

Sandbox Storybook

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

<template>
  <CdsEmptyState
    icon="list-search"
    headline="Пусто"
    title="Ничего не найдено"
    text="Попробуйте изменить запрос или сбросить фильтры, чтобы увидеть больше результатов"
  />
</template>

Медиа

Проп icon показывает иконку, image — изображение (имеет приоритет над иконкой). Размер медиа задаёт size: по умолчанию 96 для иконки и 200 для изображения. Цвет иконки меняет проп color.

Sandbox Storybook

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

<template>
  <div class="flex gap-4">
    <CdsEmptyState
      icon="list-search"
      title="Ничего не найдено"
      text="Попробуйте изменить запрос или сбросить фильтры"
      class="flex-1"
    />
    <CdsEmptyState
      image="/images/temp/girl.webp"
      title="Ничего не найдено"
      text="Попробуйте изменить запрос или сбросить фильтры"
      class="flex-1"
    />
  </div>
</template>

Иллюстрации

Legacy-иллюстрации из пакета @central-design-system/illustrations (CDS 3): проп illustration принимает kebab-case имя глобально зарегистрированного компонента (регистрируются через опцию illustrations в createCds). Свою иллюстрацию можно отрендерить слотом illustration.

Sandbox Storybook

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

<template>
  <CdsEmptyState
    illustration="search-interface"
    title="Ничего не найдено"
    text="Попробуйте изменить запрос или сбросить фильтры"
  />
</template>

Выравнивание

Проп justify прижимает контент к краю контейнера: start, center (по умолчанию) или end. Пунктирная рамка в демо показывает границы контейнера.

Sandbox Storybook

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

<template>
  <div class="flex flex-col gap-4">
    <CdsEmptyState
      justify="start"
      icon="list-search"
      title="Выравнивание start"
      text="Контент прижат к левому краю контейнера"
      class="justify-demo"
    />
    <CdsEmptyState
      justify="end"
      icon="list-search"
      title="Выравнивание end"
      text="Контент прижат к правому краю контейнера"
      class="justify-demo"
    />
  </div>
</template>

<style scoped>
.justify-demo {
  border: 1px dashed var(--cds-color-line-primary);
  border-radius: var(--cds-border-radius-200);
}
</style>

Действия

Проп action-text добавляет кнопку под контентом; клик по ней приходит событием click:action. Когда действий несколько, рендерите свои кнопки слотом actions — привяжите props.onClick из слота к главной кнопке, чтобы событие click:action продолжало работать.

Sandbox Storybook

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

<template>
  <div class="flex gap-4">
    <CdsEmptyState
      icon="list-search"
      title="Ничего не найдено"
      text="Попробуйте изменить запрос или сбросить фильтры"
      action-text="Сбросить фильтры"
      class="flex-1"
    />
    <CdsEmptyState
      icon="list-search"
      title="Ничего не найдено"
      text="Попробуйте изменить запрос или сбросить фильтры"
      class="flex-1"
    >
      <template #actions="{ props }">
        <CdsButton variant="soft" color="brand">Назад</CdsButton>
        <CdsButton v-bind="props">Сбросить фильтры</CdsButton>
      </template>
    </CdsEmptyState>
  </div>
</template>

Слоты

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

Слот	Описание
media	Медиа-область. Замещает контент из icon и image
illustration	Иллюстрация. Замещает контент из illustration
headline	Акцентный заголовок. Замещает текст из headline
title	Заголовок. Замещает текст из title
text	Описание. Замещает текст из text
description	Дополнительное описание. Замещает текст из description
default	Произвольный контент между описанием и действиями
actions	Кнопки действий; получает props с обработчиком onClick

Sandbox Storybook

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

<template>
  <CdsEmptyState>
    <template #media>
      <CdsImage src="/images/temp/girl.webp" />
    </template>
    <template #title> Заголовок пустого состояния </template>
    <template #text>
      Описание пустого состояния, которое может быть длинным и содержать много текста. Также может описывать варианты
      решения проблемы.
    </template>
    <template #actions="{ props }">
      <CdsButton v-bind="props" text="Добавить данные" />
    </template>
  </CdsEmptyState>
</template>

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

Storybook

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

Поиск без результатов

Когда запросу ничего не соответствует, вместо списка появляется пустое состояние. Кнопка из action-text очищает запрос по событию click:action — пользователь возвращается к полному списку одним кликом. Попробуйте ввести запрос, которого нет в списке.

Sandbox Storybook

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

const query = ref('стол');

const items = ['Кресло офисное', 'Шкаф для документов', 'Стеллаж металлический', 'Лампа настольная'];

const filtered = computed(() => items.filter((item) => item.toLowerCase().includes(query.value.trim().toLowerCase())));
</script>

<template>
  <div class="m-auto flex w-[350px] flex-col gap-2">
    <CdsTextInput v-model="query" placeholder="Поиск по каталогу" prepend-inner-icon="search" clearable />

    <ul v-if="filtered.length" class="m-0 flex list-none flex-col gap-2 p-0">
      <li v-for="item in filtered" :key="item">{{ item }}</li>
    </ul>

    <CdsEmptyState
      v-else
      icon="list-search"
      title="Ничего не найдено"
      text="Попробуйте изменить запрос или очистить поиск"
      action-text="Очистить поиск"
      @click:action="query = ''"
    />
  </div>
</template>

Пустой список

Первое посещение раздела — повод не извиняться за пустоту, а помочь начать: title называет ситуацию, text обещает результат, кнопка из action-text создаёт первую запись. После добавления записи список замещает заглушку.

Sandbox Storybook

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

const documents = ref<string[]>([]);
let counter = 0;

function addDocument() {
  counter += 1;
  documents.value.push(`Договор поставки № ${counter}`);
}

function removeDocument(index: number) {
  documents.value.splice(index, 1);
}
</script>

<template>
  <div class="m-auto w-[350px]">
    <CdsEmptyState
      v-if="!documents.length"
      icon="file"
      title="У вас пока нет документов"
      text="Добавьте первый документ — он появится в этом списке"
      action-text="Добавить документ"
      @click:action="addDocument"
    />

    <div v-else class="flex flex-col gap-2">
      <div v-for="(doc, index) in documents" :key="doc" class="flex items-center justify-between gap-2">
        <span>{{ doc }}</span>
        <CdsButton
          variant="soft"
          color="neutral"
          size="sm"
          icon="delete"
          aria-label="Удалить"
          @click="removeDocument(index)"
        />
      </div>

      <div class="flex justify-center mt-2">
        <CdsButton variant="soft" color="brand" size="sm" prepend-icon="add" text="Добавить ещё" @click="addDocument" />
      </div>
    </div>
  </div>
</template>

Ошибка загрузки

Если данные не загрузились, объясните причину и дайте повторить запрос на месте. Кнопка в слоте actions показывает loading на время повтора, а props.onClick из слота сохраняет событие click:action.

Sandbox Storybook

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

const state = ref<'error' | 'loading' | 'success'>('error');

async function retry() {
  state.value = 'loading';

  await new Promise((resolve) => setTimeout(resolve, 1500));

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

<template>
  <div class="m-auto w-[350px]">
    <CdsEmptyState
      v-if="state !== 'success'"
      icon="error"
      title="Не удалось загрузить данные"
      text="Проверьте соединение с интернетом и попробуйте ещё раз"
      @click:action="retry"
    >
      <template #actions="{ props }">
        <CdsButton v-bind="props" :loading="state === 'loading'" text="Повторить" />
      </template>
    </CdsEmptyState>

    <div v-else class="flex flex-col items-center gap-2">
      <span>Данные успешно загружены</span>
      <CdsButton variant="soft" color="neutral" size="sm" text="Сбросить демо" @click="state = 'error'" />
    </div>
  </div>
</template>

Страница 404

headline выводит крупный код ошибки, а href (или to для vue-router) передаётся кнопке действия — она работает как ссылка и уводит пользователя с тупиковой страницы.

Sandbox Storybook

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

<template>
  <CdsEmptyState
    headline="404"
    title="Страница не найдена"
    text="Возможно, страница переехала или в адресе опечатка. Начните с главной страницы"
    action-text="На главную"
    href="/"
  />
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
actionText	string | undefined	—	Текст кнопки действия. При указании рендерится кнопка под контентом.
bgColor	string | undefined	—	Цвет фона компонента
color	string | undefined	—	Цвет компонента
content	string | number | undefined	—	Контент, отображаемый в компоненте.
description	string | undefined	—	Описание
headline	string | undefined	—	Крупный акцентный заголовок над основным заголовком.
height	string | number | undefined	—	Высота компонента
href	string | undefined	—	Атрибут href для ссылки. Если указан, компонент будет вести себя как обычная ссылка
icon	IconValue | undefined	—	Иконка в медиа-области.
illustration	string | undefined	—	Legacy-иллюстрация из пакета @central-design-system/illustrations (CDS 3): kebab-case имя глобально зарегистрированного компонента, например rocket. Иллюстрации регистрируются через опцию illustrations в createCds.
image	string | undefined	—	Источник изображения в медиа-области (имеет приоритет над icon).
justify	"start" | "end" | "center" | undefined	'center'	Горизонтальное выравнивание контента: start, center, end.
maxHeight	string | number | undefined	—	Максимальная высота компонента
maxWidth	string | number | undefined	—	Максимальная ширина компонента
minHeight	string | number | undefined	—	Минимальная высота компонента
minWidth	string | number | undefined	—	Минимальная ширина компонента
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Размер компонента
text	string | number | undefined	—	Текст, отображаемый в компоненте.
textWidth	string | number | undefined	500	Максимальная ширина блока описания.
theme	string | undefined	—	Тема компонента
title	string | undefined	—	Заголовок.
to	LinkTo | undefined	—	Маршрут назначения или объект для RouterLink. Если указан, компонент будет вести себя как RouterLink
width	string | number | undefined	—	Ширина компонента

События

Имя	Тип	Описание
click:action	[event: MouseEvent]	Клик по кнопке действия.

Слоты

Имя	Тип	Описание
actions	{ props: { onClick: (event: MouseEvent) => void; }; }	Слот действий; получает props с обработчиком onClick для привязки к своему элементу.
default	any	Произвольный контент между описанием и действиями.
description	any	Слот описания (вместо пропа description).
headline	any	Слот акцентного заголовка (вместо пропа headline).
illustration	any	Слот медиа-области для иллюстрации (вместо пропса illustration).
media	any	Слот медиа-области (вместо пропсов image/icon).
text	any	Слот описания (вместо пропа text).
title	any	Слот заголовка (вместо пропа title).