Если из тегов нужно собрать переключатель или фильтр с выбором, возьмите CdsTagGroup. Для счётчика или точки-индикатора поверх другого элемента подойдёт CdsBadge, а действие запускайте кнопкой CdsButton — тег только помечает.

Анатомия

Тег состоит из контейнера и зон контента: prepend и append несут иконку или аватар, текст живёт в центре, а кнопка закрытия появляется при closable.

Storybook

Вариации

Цвета

Свойство color окрашивает тег в один из 11 псевдонимов палитры; без него тег остаётся нейтральным серым. Цвет текста при необходимости переопределяет text-color. Свойство disabled заменяет цвета тега на служебные цвета заблокированного состояния и снимает реакцию на клики.

Sandbox Storybook

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

const colors = CdsTag.constants.colors;
</script>

<template>
  <div class="flex flex-wrap justify-center gap-2">
    <CdsTag v-for="color in colors" :key="color" :text="color" :color="color" />
  </div>
</template>

Размеры

Свойство size — пять размеров от xs до xl. Размер по умолчанию — md.

Sandbox Storybook

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

const sizes = CdsTag.constants.sizes;
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-2">
    <CdsTag v-for="size in sizes" :key="size" :text="size" :size="size" />
  </div>
</template>

Форма

Свойство pill полностью скругляет углы — такая форма подчёркивает самостоятельность метки и хорошо смотрится в облаке тегов.

Sandbox Storybook

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

<template>
  <div class="flex justify-center gap-2">
    <CdsTag text="Обычный тег" />
    <CdsTag pill text="Тег pill" />
  </div>
</template>

Иконки и аватары

Свойства prepend-icon и append-icon добавляют иконку до и после текста, prepend-avatar и append-avatar — круглый аватар. Размер иконки и аватара следует за размером тега.

Sandbox Storybook

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

<template>
  <div class="flex flex-wrap items-center justify-center gap-2">
    <CdsTag prepend-icon="star" text="Избранное" />
    <CdsTag append-icon="external-link" text="b2b-center.ru" />
    <CdsTag prepend-avatar="https://i.pravatar.cc/80?img=12" text="Анна Ветрова" pill />
  </div>
</template>

Слоты

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

Слот	Описание
default	Контент тега. Замещает текст из text
prepend	Контент перед текстом. Замещает prepend-icon / prepend-avatar
append	Контент после текста. Замещает append-icon / append-avatar
close	Контент кнопки закрытия. Замещает иконку из close-icon
filter	Контент индикатора выбора в группе. Замещает иконку из filter-icon

Sandbox Storybook

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

<template>
  <div class="flex flex-wrap justify-center gap-2">
    <CdsTag color="green">Скидка <b>−20%</b></CdsTag>
    <CdsTag text="Избранное">
      <template #prepend>
        <CdsIcon icon="star-fill" start />
      </template>
    </CdsTag>
    <CdsTag text="Черновик" closable>
      <template #close>
        <CdsIcon icon="delete" />
      </template>
    </CdsTag>
  </div>
</template>

Тег-ссылка

Передайте href (или to с объектом RouteLocationRaw из vue-router) — и тег отрендерится тегом a: получит курсор, фокус с клавиатуры и переход по Enter, сохранив внешний вид тега.

Sandbox Storybook

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

<template>
  <div class="flex flex-wrap justify-center gap-2">
    <CdsTag href="https://www.b2b-center.ru" target="_blank" append-icon="external-link" text="b2b-center.ru" />
    <CdsTag href="#" pill text="vue" />
    <CdsTag href="#" pill text="design-system" />
  </div>
</template>

Закрытие

Свойство closable (или его псевдоним removable) добавляет кнопку закрытия. Клик по ней скрывает тег и эмитит событие click:close, а видимостью можно управлять снаружи через v-model. Иконку кнопки меняет close-icon, доступную подпись — close-label.

Sandbox Storybook

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

const visible = ref(true);
</script>

<template>
  <div class="flex items-center justify-center gap-4">
    <CdsTag v-model="visible" closable text="Закрываемый тег" />
    <CdsButton v-if="!visible" variant="soft" color="brand" size="sm" text="Вернуть тег" @click="visible = true" />
  </div>
</template>

Выбор в группе

Внутри CdsTagGroup тег становится переключателем: value задаёт его значение в группе, выбранное состояние помечается классом cds-tag--selected, а событие group:selected сообщает о смене выбора. С filter у выбранного тега появляется индикатор — иконку меняет filter-icon, разметку целиком — слот filter. В слоте default доступны isSelected, toggle и select — на них удобно строить свою разметку тега.

Цвет выбранного тега задаёт active-color: без него выбор красит сама группа брендовым цветом, а color остаётся цветом невыбранного тега.

Sandbox Storybook

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

const statuses = ['Черновики', 'На проверке', 'Опубликованные'];
const selected = ref('На проверке');
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsTagGroup v-model="selected" filter>
      <CdsTag v-for="status in statuses" :key="status" :value="status" :text="status" />
    </CdsTagGroup>

    <span class="text-100 text-content-secondary">Выбрано: {{ selected ?? '—' }}</span>
  </div>
</template>

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

Storybook

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

Выбранные фильтры

Применённые фильтры поиска удобно показать строкой закрываемых тегов: каждый тег убирает свой фильтр по click:close, а соседняя tertiary-кнопка сбрасывает всё сразу.

Sandbox Storybook

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

const initial = ['Электроника', 'До 10 000 ₽', 'В наличии', 'Доставка завтра', 'Рейтинг 4+'];
const filters = ref([...initial]);

const remove = (filter: string) => {
  filters.value = filters.value.filter((item) => item !== filter);
};
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-2">
    <CdsTag v-for="filter in filters" :key="filter" :text="filter" closable @click:close="remove(filter)" />
    <CdsButton
      v-if="filters.length"
      variant="soft"
      color="neutral"
      size="sm"
      text="Сбросить всё"
      @click="filters = []"
    />
    <CdsButton v-else variant="soft" color="brand" size="sm" text="Вернуть фильтры" @click="filters = [...initial]" />
  </div>
</template>

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

В списках и таблицах цветной тег мгновенно показывает состояние записи. Закрепите цвета за статусами: green — успех, lemon — ожидание, red — отказ, neutral — черновик. Компактный size="sm" не спорит с текстом строки.

Sandbox Storybook

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

const requests = [
  { id: 4821, title: 'Закупка ноутбуков', status: 'Согласована', color: 'green' },
  { id: 4820, title: 'Ремонт офиса', status: 'На рассмотрении', color: 'lemon' },
  { id: 4819, title: 'Аренда склада', status: 'Отклонена', color: 'red' },
  { id: 4818, title: 'Поставка канцелярии', status: 'Черновик', color: 'neutral' }
];
</script>

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

Добавление меток

Поле ввода и теги вместе дают редактор меток: Enter добавляет новую метку, крестик (closable + click:close) убирает лишнюю. Дубликаты отсекаются до добавления в список.

Sandbox Storybook

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

const input = ref('');
const tags = ref(['vue', 'design-system']);

const add = () => {
  const value = input.value.trim();

  if (value && !tags.value.includes(value)) {
    tags.value.push(value);
  }

  input.value = '';
};

const remove = (tag: string) => {
  tags.value = tags.value.filter((item) => item !== tag);
};
</script>

<template>
  <div class="flex flex-col gap-2 w-[350px] m-auto">
    <CdsTextInput v-model="input" label="Метки" placeholder="Введите метку и нажмите Enter" @keydown.enter="add" />
    <div class="flex flex-wrap gap-2">
      <CdsTag v-for="tag in tags" :key="tag" :text="tag" closable @click:close="remove(tag)" />
    </div>
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
activeClass	string | undefined	—	CSS-класс, применяемый к активной (выбранной) ссылке-тегу.
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
appendAvatar	string | undefined	—	Аватар, отображаемый после (справа от) контента тега.
appendIcon	IconValue | undefined	—	Иконка, отображаемая после (справа от) контента тега.
closable	boolean | undefined	—	Добавляет кнопку закрытия, скрывающую тег.
closeIcon	IconValue | undefined	'remove'	Иконка кнопки закрытия.
closeLabel	string | undefined	'$cds.close'	Доступная подпись (aria-label) для кнопки закрытия.
color	string | undefined	—	Цвет компонента
content	string | number | undefined	—	Контент, отображаемый в компоненте.
disabled	boolean | null | undefined	null	Заблокированное состояние
draggable	boolean | undefined	—	Делает тег перетаскиваемым (нативный drag-and-drop).
exact	boolean | undefined	—	Если true, активное состояние будет применяться только при точном совпадении маршрута
filter	boolean | undefined	—	Отображает иконку-индикатор выбора при использовании тега в группе (CdsTagGroup).
filterIcon	IconValue | undefined	'check'	Иконка индикатора выбора (актуально вместе с filter).
href	string | undefined	—	Атрибут href для ссылки. Если указан, компонент будет вести себя как обычная ссылка
label	boolean | undefined	—	Применяет стиль «label» с уменьшенным скруглением углов.
link	boolean | undefined	—	Назначает тегу стили и поведение ссылки.
modelValue	boolean | undefined	true	Видимость тега (v-model). При false тег не отображается.
pill	boolean | undefined	—	Делает углы тега полностью скруглёнными.
prependAvatar	string | undefined	—	Аватар, отображаемый перед (слева от) контентом тега.
prependIcon	IconValue | undefined	—	Иконка, отображаемая перед (слева от) контентом тега.
removable	boolean | undefined	—	Добавляет кнопку удаления (псевдоним closable).
replace	boolean | undefined	—	Если true, навигация по маршруту будет заменять текущую запись в истории вместо добавления новой
selectedClass	string | undefined	—	CSS класс для выбранного состояния
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Размер компонента
tag	string | JSXComponent<any> | undefined	'span'	Пользовательский HTML-тег для отображения
text	string | number | undefined	—	Текст, отображаемый в компоненте.
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента
to	LinkTo | undefined	—	Маршрут назначения или объект для RouterLink. Если указан, компонент будет вести себя как RouterLink
value	any	—	Значение компонента в группе

События

Имя	Тип	Описание
click	[e: MouseEvent | KeyboardEvent]	Клик по тегу (мышью или с клавиатуры).
click:close	[e: MouseEvent]	Клик по кнопке закрытия тега.
group:selected	[value: { value: boolean; }]	Изменение состояния выбора тега в составе группы.
update:modelValue	[value: boolean]	Изменение видимости тега (v-model).

Слоты

Имя	Тип	Описание
append	any	Контент после основного содержимого (на месте append-иконки/аватара).
close	any	Кастомный контент кнопки закрытия.
default	{ isSelected: boolean | undefined; selectedClass: boolean | (string | undefined)[] | undefined; select: ((value: boolean) => void) | undefined; toggle: (() => void) | undefined; value: unknown; disabled: boolean; }	Контент тега по умолчанию. В аргументах слота доступно состояние группы (выбор, переключение).
filter	any	Кастомный контент индикатора выбора (актуально вместе с filter).
label	any	Контент метки тега.
prepend	any	Контент перед основным содержимым (на месте prepend-иконки/аватара).