Counter

@cloud-ru/ds-counter — Компактный счётчик для отображения числовых меток, бейджей и состояний.

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

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

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

Когда не нужен 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

CounterProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | appearance | "blue" | "green" | "neutral" | "orange" | "pink" | "primary" | "red" | "violet" | "yellow" | primary | Внешний вид | | className | string | — | Дополнительный CSS-класс | | data-test-id | string | — | | | innerRef | Ref<HTMLDivElement> | — | Ref на корневой DOM-элемент. Используем явный проп, чтобы не зависеть от forwardRef и не тащить type-assertions на экспорт. | | plusLimit | number | 10 | Порог сокращения значения для варианта count-plus | | roleAppearance | "accent" | "decor" | accent | Роль, в которой применяется appearance: акцентная заливка или декоративная | | size | "s" | "xs" | s | Размер | | value | number | — | Значение | | variant | "count" | "count-k" | "count-plus" | count | Вариант форматирования |

Related types

• Appearance = "blue" | "green" | "neutral" | "orange" | "pink" | "primary" | "red" | "violet" | "yellow"

• RoleAppearance = "accent" | "decor"

• Size = "s" | "xs"

• Variant = "count" | "count-k" | "count-plus"