For labels with arbitrary palette colors — categories, filters — take CdsTag; for counters and marker dots in the corner of an element — CdsBadge.

Variations

Statuses

The status prop sets one of the five semantic statuses. Assign the values to the states of the object: info — neutral, progress — the process is running, warning — needs attention, success — success, danger — a problem.

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>

Display mode

The variant prop controls how prominent the status is. fill (the default) is a badge with a colored background; it catches the eye in lists and tables. text has no background, a colored status icon and neutral text: the semantics are kept, but the status does not compete with the surrounding content.

A similar "colored icon + text" pair can be assembled by hand — from CdsIcon with the color prop and text next to it. That way you are free to pick the icon and the color; variant="text", on the other hand, guarantees that the icon and the color always match the semantics of the status.

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

The indicator prop puts a dot in the status color before the text. The status reads more compactly and fits dense lists well. With variant="text" the dot replaces the icon.

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

The pulse prop makes the dot pulse and works only together with indicator. Enable it where a process is running right now: a check, an upload, a sync. Finished and static states do not need it — endless motion distracts (WCAG 2.2.2). Under prefers-reduced-motion the pulse is turned off.

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>

Status change

When the status changes, the color of the fill, the text and the dot transitions smoothly, without a jump.

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

The text comes from the text prop. When you need markup — emphasis, non-breaking spaces — use the default slot: it replaces the text from the prop.

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>

Guidelines

Storybook

Scenarios

Statuses of records in a list

In lists and tables a fill badge shows the state of a record at first glance. Keep the vocabulary of statuses short and consistent across the whole section — then the column can be scanned by color, without reading it.

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>

Tracking a process

The status reflects the course of an asynchronous process: after being sent for review the object moves to progress, and once it is done — to success. The user sees the current state without reloading the page.

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>

A status in a details block

In a dense info block — an invoice card, a panel of details — the fill background pulls attention away. The text variant sits in line with the rest of the data: the colored icon keeps the semantics, and the text stays neutral.

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

Props

Name	Type	Default	Description
content	string | number | undefined	—	Content displayed in the component.
indicator	boolean | undefined	—	A dot in the status color before the text. With variant="text" it replaces the icon.
pulse	boolean | undefined	—	Pulse of the dot. Works only together with indicator. Enable it only where a process is running right now: endless motion distracts and, per WCAG 2.2.2, should not accompany static states. Not animated under prefers-reduced-motion.
status	"progress" | "danger" | "success" | "warning" | "info" | undefined	'info'	Semantic status — drives the color and the default icon.
text	string | number | undefined	—	Text displayed in the component.
theme	string | undefined	—	Component theme
variant	"fill" | "text" | undefined	'fill'	Display mode: fill — a filled badge without an icon; text — a transparent background with a colored status icon.

Slots

Name	Type	Description
default	any	Slot for the status text.