Для меток с произвольными цветами палитры — категорий, фильтров — подойдёт CdsTag, для счётчиков и точек-пометок в углу элемента — CdsBadge.

Вариации

Статусы

Проп status задаёт один из пяти семантических статусов. Закрепите значения за состояниями объекта: info — нейтральное, progress — процесс идёт, warning — нужно внимание, success — успех, danger — проблема.

Sandbox Storybook

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

<template>
  <div class="flex flex-wrap items-center justify-center gap-2">
    <CdsStatus text="Новый" />
    <CdsStatus status="progress" text="В обработке" />
    <CdsStatus status="warning" text="Требует внимания" />
    <CdsStatus status="success" text="Оплачен" />
    <CdsStatus status="danger" text="Просрочен" />
  </div>
</template>

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

Проп variant управляет заметностью. fill (по умолчанию) — бейдж с цветной заливкой, притягивает взгляд в списках и таблицах. text — без фона, с цветной иконкой статуса и нейтральным текстом: семантика сохраняется, но статус не спорит с окружающим контентом.

Похожую связку «цветная иконка + текст» можно собрать и вручную — из CdsIcon с пропом color и текста рядом. Так вы свободны в выборе иконки и цвета; variant="text" же гарантирует, что иконка и цвет всегда соответствуют семантике статуса.

Sandbox Storybook

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

<template>
  <div class="flex flex-col items-center gap-2">
    <div class="flex items-center gap-2">
      <span class="w-[48px] text-100 text-content-secondary">fill</span>
      <CdsStatus status="success" text="Оплачен" />
    </div>
    <div class="flex items-center gap-2">
      <span class="w-[48px] text-100 text-content-secondary">text</span>
      <CdsStatus status="success" text="Оплачен" variant="text" />
    </div>
  </div>
</template>

Индикатор

Проп indicator ставит перед текстом точку цвета статуса. Так статус читается компактнее и хорошо встаёт в плотные списки. В режиме variant="text" точка заменяет иконку.

Sandbox Storybook

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

<template>
  <div class="flex flex-col items-center gap-2">
    <div class="flex flex-wrap items-center justify-center gap-2">
      <CdsStatus indicator text="Новый" />
      <CdsStatus indicator status="progress" text="В обработке" />
      <CdsStatus indicator status="warning" text="Требует внимания" />
      <CdsStatus indicator status="success" text="Оплачен" />
      <CdsStatus indicator status="danger" text="Просрочен" />
    </div>
    <div class="flex flex-wrap items-center justify-center gap-4">
      <CdsStatus indicator variant="text" text="Новый" />
      <CdsStatus indicator variant="text" status="progress" text="В обработке" />
      <CdsStatus indicator variant="text" status="success" text="Оплачен" />
      <CdsStatus indicator variant="text" status="danger" text="Просрочен" />
    </div>
  </div>
</template>

Пульс

Проп pulse заставляет точку пульсировать и работает только вместе с indicator. Включайте его там, где процесс идёт прямо сейчас: проверка, загрузка, синхронизация. Для завершённых и статичных состояний пульс не нужен — бесконечное движение отвлекает (WCAG 2.2.2). При prefers-reduced-motion пульс выключается.

Sandbox Storybook

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

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsStatus indicator pulse status="progress" text="Идёт проверка" />
    <CdsStatus indicator pulse variant="text" status="progress" text="Идёт проверка" />
    <CdsStatus indicator status="success" text="Проверено" />
  </div>
</template>

Смена статуса

Когда статус меняется, цвет заливки, текста и точки переходит плавно, без скачка.

Sandbox Storybook

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

const statuses = [
  { status: 'info', text: 'Черновик' },
  { status: 'progress', text: 'На проверке' },
  { status: 'warning', text: 'Нужны правки' },
  { status: 'success', text: 'Согласован' }
] as const;

const index = ref(0);
const current = computed(() => statuses[index.value]);
</script>

<template>
  <div class="flex items-center justify-center gap-4">
    <CdsStatus indicator :pulse="current.status === 'progress'" :status="current.status" :text="current.text" />
    <CdsButton
      size="sm"
      variant="soft"
      color="neutral"
      text="Сменить статус"
      @click="index = (index + 1) % statuses.length"
    />
  </div>
</template>

Текст

Текст задаётся пропом text. Когда нужна разметка — выделение, неразрывные пробелы, — используйте слот default: он замещает текст из пропа.

Sandbox Storybook

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

<template>
  <div class="flex justify-center">
    <CdsStatus status="progress" variant="text">На проверке до <b>15&nbsp;августа</b></CdsStatus>
  </div>
</template>

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

Storybook

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

Статусы записей в списке

В списках и таблицах fill-бейдж показывает состояние записи с первого взгляда. Держите словарь статусов коротким и единым для всего раздела — так колонку можно сканировать по цвету, не вчитываясь.

Sandbox Storybook

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

const orders = [
  { id: 4821, title: 'Поставка серверов', status: 'success', text: 'Оплачен' },
  { id: 4820, title: 'Закупка ноутбуков', status: 'progress', text: 'В обработке' },
  { id: 4819, title: 'Аренда склада', status: 'warning', text: 'Ждёт оплаты' },
  { id: 4818, title: 'Ремонт офиса', status: 'danger', text: 'Просрочен' }
] as const;
</script>

<template>
  <div class="m-auto flex w-[360px] flex-col gap-2">
    <div v-for="order in orders" :key="order.id" class="flex items-center justify-between gap-4">
      <span>{{ order.title }}</span>
      <CdsStatus :status="order.status" :text="order.text" />
    </div>
  </div>
</template>

Отслеживание процесса

Статус отражает ход асинхронного процесса: после отправки на проверку объект переходит в progress, по завершении — в success. Пользователь видит текущее состояние без перезагрузки страницы.

Sandbox Storybook

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

const step = ref<'draft' | 'review' | 'done'>('draft');

const current = computed(() => {
  if (step.value === 'review') return { status: 'progress', text: 'На проверке' } as const;
  if (step.value === 'done') return { status: 'success', text: 'Согласован' } as const;

  return { status: 'info', text: 'Черновик' } as const;
});

const send = () => {
  step.value = 'review';

  setTimeout(() => {
    step.value = 'done';
  }, 2000);
};
</script>

<template>
  <div class="m-auto flex w-[360px] items-center justify-between gap-4">
    <div class="flex items-center gap-2">
      <span>Договор № 4821</span>
      <CdsStatus :status="current.status" :text="current.text" />
    </div>

    <CdsButton v-if="step !== 'done'" size="sm" text="На проверку" :loading="step === 'review'" @click="send" />
    <CdsButton v-else variant="soft" color="neutral" size="sm" text="Заново" @click="step = 'draft'" />
  </div>
</template>

Статус в блоке деталей

В плотном инфоблоке — карточке счёта, панели реквизитов — заливка fill перетягивает внимание. Вариант text встаёт в строку с остальными данными: цветная иконка сохраняет семантику, а текст остаётся нейтральным.

Sandbox Storybook

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

<template>
  <div class="m-auto flex w-[320px] flex-col gap-1">
    <div class="flex items-center justify-between">
      <span class="text-content-secondary">Счёт № 4821</span>
      <CdsStatus status="success" text="Оплачен" variant="text" />
    </div>
    <div class="flex items-center justify-between">
      <span class="text-content-secondary">Сумма</span>
      <span>124 500 ₽</span>
    </div>
    <div class="flex items-center justify-between">
      <span class="text-content-secondary">Срок оплаты</span>
      <span>15 августа</span>
    </div>
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
content	string | number | undefined	—	Контент, отображаемый в компоненте.
indicator	boolean | undefined	—	Точка цвета статуса перед текстом. При variant="text" заменяет иконку.
pulse	boolean | undefined	—	Пульс точки. Работает только вместе с indicator. Включайте там, где процесс идёт прямо сейчас: бесконечное движение отвлекает и по WCAG 2.2.2 не должно быть у статичных состояний. При prefers-reduced-motion не анимируется.
status	"progress" | "danger" | "success" | "warning" | "info" | undefined	'info'	Семантический статус — определяет цвет и дефолтную иконку.
text	string | number | undefined	—	Текст, отображаемый в компоненте.
theme	string | undefined	—	Тема компонента
variant	"fill" | "text" | undefined	'fill'	Режим отображения: fill — заливка-бейдж без иконки; text — прозрачный фон с цветной иконкой статуса.

Слоты

Имя	Тип	Описание
default	any	Слот для текста статуса.