The component is deprecated: do not write new code with it. It keeps working across the whole 4.x line and prints a [CDS UPGRADE] warning in the dev console; it will be removed in 5.0. To show the course of a process without step navigation use CdsSteps — without the interactive prop the steps are not clickable, and the header without items works as a status tracker (see the "Request status" scenario). Mind that the look differs: CdsStages is an arrow bar, CdsSteps is a row of indicators with a progress line. To switch between equally weighted sections — CdsTabs.

Anatomy

The bar is a row of stages: each one has a title, and the arrow separators between neighboring stages set the direction of the process. The color of a stage encodes its state: neutral — the stage is ahead, accented — it is the current one, green — passed, red — an error.

Storybook

Variations

Stages

Pass an array of objects into items: the title and the value of a stage are read by the item-title and item-value keys (title and value by default). As long as current is not set, all the stages stay neutral — the process has not started yet.

Sandbox Storybook

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

const items = [
  { title: 'Заявка', value: 1 },
  { title: 'Проверка', value: 2 },
  { title: 'Согласование', value: 3 },
  { title: 'Договор', value: 4 }
];
</script>

<template>
  <div class="flex items-center justify-center">
    <CdsStages :items="items" />
  </div>
</template>

The current stage

current takes the value of the active stage: it is highlighted with the accent color, and the stages to the left of it are marked as passed.

Sandbox Storybook

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

const items = [
  { title: 'Заявка', value: 1 },
  { title: 'Проверка', value: 2 },
  { title: 'Согласование', value: 3 },
  { title: 'Договор', value: 4 }
];
</script>

<template>
  <div class="flex items-center justify-center">
    <CdsStages :items="items" :current="3" />
  </div>
</template>

An error

An error is set in the data of a stage — props: { error: true } on an items element. The stage turns red once the process has reached it: when it is the current one or is already passed.

Sandbox Storybook

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

const items = [
  { title: 'Заявка', value: 1 },
  { title: 'Проверка', value: 2 },
  { title: 'Согласование', value: 3, props: { error: true } },
  { title: 'Договор', value: 4 }
];
</script>

<template>
  <div class="flex items-center justify-center">
    <CdsStages :items="items" :current="3" />
  </div>
</template>

Finishing the process

The finished prop marks all the stages as passed at once — the value of current does not matter then.

Sandbox Storybook

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

const items = [
  { title: 'Заявка', value: 1 },
  { title: 'Проверка', value: 2 },
  { title: 'Согласование', value: 3 },
  { title: 'Договор', value: 4 }
];
</script>

<template>
  <div class="flex items-center justify-center">
    <CdsStages :items="items" finished />
  </div>
</template>

Guidelines

Storybook

Scenarios

Order progress

The value of current comes from the data and changes as the order is processed. Once the last stage is passed, turn finished on — the whole bar becomes green.

Sandbox Storybook

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

const stages = [
  { title: 'Оформлен', value: 'created' },
  { title: 'Комплектация', value: 'assembly' },
  { title: 'В пути', value: 'shipping' },
  { title: 'Получен', value: 'delivered' }
];

const index = ref(0);

const finished = computed(() => index.value >= stages.length);
const current = computed(() => (finished.value ? null : stages[index.value].value));
</script>

<template>
  <div class="flex flex-col items-center gap-3">
    <CdsStages class="w-full" :items="stages" :current="current" :finished="finished" />

    <CdsButton v-if="!finished" text="Следующий этап" @click="index++" />
    <CdsButton v-else variant="soft" color="brand" text="Оформить новый заказ" @click="index = 0" />
  </div>
</template>

Rejected during review

The status of the listing is stored as a single string, and items, current and finished are computed from it. On rejection the "Проверка" stage gets props.error and turns red — the user immediately sees where the process stopped.

Sandbox Storybook

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

type Status = 'review' | 'rejected' | 'published';

const status = ref<Status>('review');

const items = computed(() => [
  { title: 'Черновик', value: 'draft' },
  { title: 'Проверка', value: 'review', props: { error: status.value === 'rejected' } },
  { title: 'Публикация', value: 'published' }
]);

const current = computed(() => (status.value === 'rejected' ? 'review' : status.value));
const finished = computed(() => status.value === 'published');
</script>

<template>
  <div class="flex flex-col items-center gap-3">
    <CdsStages class="w-full" :items="items" :current="current" :finished="finished" />

    <div class="flex gap-2">
      <template v-if="status === 'review'">
        <CdsButton text="Одобрить" @click="status = 'published'" />
        <CdsButton variant="soft" color="brand" text="Отклонить" @click="status = 'rejected'" />
      </template>

      <CdsButton v-else variant="soft" color="brand" text="Вернуть на проверку" @click="status = 'review'" />
    </div>
  </div>
</template>

Statuses in a list

The bar is compact and does not intercept clicks, so it is easy to repeat in every row of a list or a table: the width comes from a utility class, and the state of the row from its own current, finished and error.

Sandbox Storybook

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

interface Order {
  name: string;
  current?: number;
  error?: boolean;
  finished?: boolean;
}

const stages = [
  { title: 'Заявка', value: 1 },
  { title: 'Проверка', value: 2 },
  { title: 'Договор', value: 3 }
];

const orders: Order[] = [
  { name: 'Поставка канцтоваров', current: 2 },
  { name: 'Обслуживание техники', current: 2, error: true },
  { name: 'Ремонт переговорной', finished: true }
];

const stagesFor = (order: Order) =>
  stages.map((stage) => (order.error && stage.value === order.current ? { ...stage, props: { error: true } } : stage));
</script>

<template>
  <div class="m-auto flex w-[560px] flex-col gap-3">
    <div v-for="order in orders" :key="order.name" class="flex items-center justify-between gap-3">
      <span class="text-200">{{ order.name }}</span>

      <CdsStages
        class="w-[300px] shrink-0"
        :items="stagesFor(order)"
        :current="order.current"
        :finished="order.finished"
      />
    </div>
  </div>
</template>

API

Props

Name	Type	Default	Description
current	string | number | null | undefined	null	Current stage
finished	boolean | undefined	—	All stages are finished
itemChildren	SelectItemKey	'children'	Object field that holds the child items, or a function that returns them
itemProps	SelectItemKey	'props'	Object field that holds the props of the item, or a function that returns them
items	any[] | undefined	[]	Array of items to display
itemTitle	SelectItemKey	'title'	Object field used as the item title, or a function that returns it
itemType	SelectItemKey	'type'	Object field that defines the item type (item, divider, subheader), or a function that returns it
itemValue	SelectItemKey	'value'	Object field used as the item value, or a function that returns it
returnObject	boolean | undefined	—	Return an object in the model value instead of an array
theme	string | undefined	—	Component theme
valueComparator	ValueComparator | undefined	—	Function that compares item values to determine the selected state

Exposed

Name	Type	Description
isCurrent	(idx: number) => boolean	Checks whether the stage with the given index is the current one.
isFinished	boolean	Whether all the stages are passed.