Для текстового статуса объекта («Успешно», «В работе») подойдёт CdsStatus, а у CdsAvatar есть встроенный проп badge для типовых индикаторов на аватаре.

Анатомия

Бейдж крепится к элементу из слота default и позиционируется относительно него. Содержимое — число или текст из content, иконка из icon либо разметка из слота badge.

Storybook

Вариации

Содержимое

Проп content задаёт содержимое бейджа — чаще всего это счётчик событий. По умолчанию бейдж встаёт в правый верхний угол элемента из слота.

Sandbox Storybook

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

<template>
  <div class="flex justify-center">
    <CdsBadge content="10">
      <CdsFunctionalButton icon="notification" aria-label="Уведомления" />
    </CdsBadge>
  </div>
</template>

Проп max ограничивает счётчик: всё, что больше, сворачивается в «99+». Без max значение выводится целиком.

Sandbox Storybook

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

<template>
  <div class="flex justify-center gap-4">
    <CdsBadge content="150">
      <CdsFunctionalButton icon="notification" aria-label="Уведомления" />
    </CdsBadge>
    <CdsBadge content="150" :max="99">
      <CdsFunctionalButton icon="notification" aria-label="Уведомления" />
    </CdsBadge>
  </div>
</template>

Кроме числа, content принимает короткий текст — например, пометку нового раздела в меню. Здесь бейдж встроен в строку пропом inline — о нём в разделе про позиционирование.

Sandbox Storybook

<script setup lang="ts">
import { CdsBadge, CdsCard, CdsList, CdsListItem } from '@central-design-system/components';
</script>

<template>
  <CdsCard class="m-auto w-[200px]">
    <CdsList>
      <CdsListItem value="0">
        <template #title>Главная</template>
      </CdsListItem>
      <CdsListItem value="1">
        <template #title>Входящие</template>
        <template #append>
          <CdsBadge content="new" inline />
        </template>
      </CdsListItem>
      <CdsListItem value="2">
        <template #title>Исходящие</template>
      </CdsListItem>
    </CdsList>
  </CdsCard>
</template>

Проп icon выводит иконку вместо текста.

Sandbox Storybook

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

<template>
  <div class="flex justify-center">
    <CdsBadge icon="check" inline />
  </div>
</template>

Точка

Проп dot сжимает бейдж до точки и скрывает содержимое — остаётся только сигнал «здесь есть новое». Диаметр меняется через dot-size.

Sandbox Storybook

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

<template>
  <div class="flex justify-center">
    <CdsBadge dot>
      <CdsFunctionalButton icon="notification" aria-label="Уведомления" />
    </CdsBadge>
  </div>
</template>

Цвета

Проп color принимает любой цветовой алиас дизайн-системы, text-color меняет цвет содержимого. По умолчанию бейдж красный — цвет индикации.

Sandbox Storybook

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

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

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

Позиционирование

По умолчанию бейдж позиционируется абсолютно относительно элемента из слота. Проп location выбирает угол.

Sandbox Storybook

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

<template>
  <div class="flex justify-center gap-4">
    <CdsBadge content="1" location="top end">
      <CdsButton variant="soft" color="neutral" icon="notification" aria-label="Уведомления" />
    </CdsBadge>
    <CdsBadge content="2" location="bottom end">
      <CdsButton variant="soft" color="neutral" icon="notification" aria-label="Уведомления" />
    </CdsBadge>
    <CdsBadge content="3" location="top start">
      <CdsButton variant="soft" color="neutral" icon="notification" aria-label="Уведомления" />
    </CdsBadge>
    <CdsBadge content="4" location="bottom start">
      <CdsButton variant="soft" color="neutral" icon="notification" aria-label="Уведомления" />
    </CdsBadge>
  </div>
</template>

Проп floating отодвигает бейдж от контента на 8 пикселей — так он меньше перекрывает содержимое элемента. Для точной подгонки есть offset-x и offset-y.

Sandbox Storybook

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

<template>
  <div class="flex justify-center">
    <CdsBadge content="3" floating>
      <CdsButton icon="notification" aria-label="Уведомления" />
    </CdsBadge>
  </div>
</template>

Проп inline встраивает бейдж в поток рядом с контентом — как в примере с меню выше. location, floating и offset-* при этом игнорируются.

Видимость

Проп model-value показывает и скрывает бейдж. Смена состояния анимируется, анимация настраивается через transition.

Sandbox Storybook

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

const visible = ref(false);
const toggle = () => {
  visible.value = !visible.value;
};
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <CdsBadge content="5" :model-value="visible" :inline="false">
      <CdsButton variant="soft" color="brand" @click="toggle"> {{ visible ? 'Скрыть' : 'Показать' }} бейдж </CdsButton>
    </CdsBadge>
  </div>
</template>

Слоты

Слот	Описание
default	Элемент, к которому крепится бейдж
badge	Содержимое бейджа. Замещает content и icon

Sandbox Storybook

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

<template>
  <div class="flex justify-center">
    <CdsBadge>
      <CdsFunctionalButton icon="notification" aria-label="Уведомления" />

      <template #badge> Alert </template>
    </CdsBadge>
  </div>
</template>

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

Storybook

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

Центр уведомлений

Счётчик на иконке уведомлений: max держит бейдж компактным при любом числе событий, а model-value скрывает его, когда непрочитанного не осталось, — пустой «0» не висит на иконке.

Sandbox Storybook

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

const unread = ref(3);
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <CdsBadge :content="unread" :model-value="unread > 0" :max="99">
      <CdsFunctionalButton icon="notification" aria-label="Уведомления" />
    </CdsBadge>

    <div class="flex flex-wrap justify-center gap-2">
      <CdsButton variant="soft" color="brand" text="Новое уведомление" @click="unread++" />
      <CdsButton variant="soft" color="brand" text="+100" @click="unread += 100" />
      <CdsButton variant="soft" color="neutral" text="Прочитать все" :disabled="unread === 0" @click="unread = 0" />
    </div>
  </div>
</template>

Меню с обновлениями

Счётчики в пунктах меню подсказывают, куда смотреть. Бейдж с inline встаёт в слот append пункта списка, а после открытия раздела model-value убирает его. Откройте «Входящие» — счётчик исчезнет.

Sandbox Storybook

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

const sections = ref([
  { title: 'Входящие', unread: 12 },
  { title: 'Задачи', unread: 3 },
  { title: 'Архив', unread: 0 }
]);
</script>

<template>
  <CdsCard class="m-auto w-[240px]">
    <CdsList>
      <CdsListItem v-for="section in sections" :key="section.title" :value="section.title" @click="section.unread = 0">
        <template #title>{{ section.title }}</template>
        <template #append>
          <CdsBadge :content="section.unread" :model-value="section.unread > 0" inline />
        </template>
      </CdsListItem>
    </CdsList>
  </CdsCard>
</template>

Контакты в сети

Точка-индикатор показывает состояние без слов: color="green" — контакт в сети, neutral — нет. inline ставит точку в строку списка, а проп label озвучивает состояние скринридерам.

Sandbox Storybook

<script setup lang="ts">
import { CdsBadge, CdsCard, CdsList, CdsListItem } from '@central-design-system/components';

const contacts = [
  { name: 'Анна Савельева', online: true },
  { name: 'Пётр Максимов', online: true },
  { name: 'Мария Ким', online: false }
];
</script>

<template>
  <CdsCard class="m-auto w-[240px]">
    <CdsList>
      <CdsListItem v-for="contact in contacts" :key="contact.name" :value="contact.name">
        <template #prepend>
          <CdsBadge
            dot
            inline
            :color="contact.online ? 'green' : 'neutral'"
            :label="contact.online ? 'В сети' : 'Не в сети'"
          />
        </template>
        <template #title>{{ contact.name }}</template>
      </CdsListItem>
    </CdsList>
  </CdsCard>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
color	string | undefined	—	Цвет компонента
content	string | number | undefined	—	Контент, отображаемый в компоненте.
dot	boolean | undefined	—	Уменьшает размер и скрывает содержимое, отображая компонент в виде точки
dotSize	string | number | undefined	—	Размер точки
floating	boolean | undefined	—	Переносит компонент дальше от контента. Это соответствует смещению на 8 пикселей.
height	string | number | undefined	—	Высота компонента
icon	IconValue | undefined	—	Иконка, отображаемая в компоненте. Если указано свойство dot, то это свойство будет проигнорировано.
inline	boolean | undefined	—	Отображать как inline блок вместо абсолютного позиционирования. Свойства location, floating и offset будут проигнорированы.
label	string | undefined	'$cds.badge'	Aria-label для компонента. Если не указано, будет использоваться значение по умолчанию.
location	Anchor | null | undefined	'top end'	Позиционирование элемента относительно его контейнера. Например, "top left", "center", "bottom right" и т.д.
max	string | number | undefined	—	Устанавливает максимальное допустимое значение при использовании атрибута content со значением в виде числа. Если число в поле content превышает максимальное значение, к нему добавляется суффикс «+».
maxHeight	string | number | undefined	—	Максимальная высота компонента
maxWidth	string | number | undefined	—	Максимальная ширина компонента
minHeight	string | number | undefined	—	Минимальная высота компонента
minWidth	string | number | undefined	—	Минимальная ширина компонента
modelValue	boolean | undefined	true	Определяет, отображается ли компонент или скрыт.
offsetX	string | number | undefined	—	Сместить по оси X
offsetY	string | number | undefined	—	Сместить по оси Y
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
text	string | number | undefined	—	Текст, отображаемый в компоненте.
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента
transition	string | boolean | (TransitionProps & { component?: Component | undefined; }) | null | undefined	'fade-transition'	Анимация перехода
width	string | number | undefined	—	Ширина компонента

Слоты

Имя	Тип	Описание
badge	any	Слот, предназначенный для размещения информации на бейдже.
default	any	Слот по умолчанию