Counter

Счётчик — компактный компонент для отображения числовых значений внутри другой UI-поверхности: кнопок, тегов, пунктов меню, навигации.

Демо

<Counter appearance="primary" plusLimit={10} roleAppearance="accent" size="xs" variant="count" value={9} />

Когда использовать

• Количество непрочитанных уведомлений у иконки колокольчика.
• Количество элементов в корзине или списке.
• Бейдж на табе / пункте меню.

Когда не нужен Counter: для крупных числовых метрик используйте Typography, для статусов — Tag.

Анатомия

Appearance (default primary)

Цветовая схема счётчика. Значение совпадает с именем семантической палитры темы:

• primary — акцентный (непрочитанные, новые).
• neutral — нейтральный.
• red — ошибки, срочные элементы.
• orange — предупреждения.
• yellow — внимание.
• green — успех, положительный статус.
• blue — информационный.
• violet — дополнительный акцент.
• pink — дополнительный акцент.

Variant

Формат отображения числа: count — число как есть, count-plus — сокращение с плюсом после лимита (10+, 99+), count-k — сокращение в тысячах (1K, 12K).

Size

Размер бейджа: xs — на иконках/мелких элементах, s — дефолт в табах и пунктах меню.

Role appearance (default accent)

Роль, в которой применяется выбранный appearance:

• accent — насыщенная заливка, основной токен appearance.
• decor — декоративная подложка, визуально более мягкий бейдж.

Установка

pnpm add @cloud-ru/ds-counter

import { Counter, APPEARANCE, VARIANT, SIZE } from '@cloud-ru/ds-counter'

Примеры использования

Обычное число

import { Counter } from '@cloud-ru/ds-counter';

export function Basic() {
  return <Counter value={9} />;
}

С порогом 10+

import { Counter } from '@cloud-ru/ds-counter';

export function PlusThreshold() {
  return <Counter value={42} variant='count-plus' plusLimit={10} />;
}

Тысячи как K

import { Counter } from '@cloud-ru/ds-counter';

export function ThousandsK() {
  return <Counter value={2500} variant='count-k' />;
}

Red — ошибки и срочные элементы

import { Counter } from '@cloud-ru/ds-counter';

export function Red() {
  return <Counter value={3} appearance='red' />;
}

Props

Types

CounterProps

Unions

Appearance

RoleAppearance

Size

Variant

Storybook

Figma