Design System v4 · Data display (stat / number counter / toolbar)

env: prod

NoData

Плейсхолдер для пустой ячейки / отсутствующего значения. Не использовать для полных empty-state блоков — там EmptyState.

– – –

Stat / Metric

Большое число + подпись + опциональный delta и meta. Для дашборда / профиля.

Баланс 12 450
+8% vs прошлая неделя
Турниры 47
+3 за месяц
Рейтинг 1 842
-12 за неделю
Победы 68%
0% win rate
Without delta 256
Large value 1 247 892
Negative -2 450
-15%

Number format filters: |num → «12 450», |chips → «12 450 ¤», |short → «1.2 млн»

Призовой фонд 50 000 ₽
Игроков online 1.2 млн
Сыграно матчей 87 456 321

Number Counter

Анимированное число для рейтинга, денег и крупных метрик. Duration считается логарифмом: 10 не длится столько же, сколько 10 000.

rating 100 pts rating 200 pts rating 10 000 pts rating 12 500 pts
cent $0.01 micro $0.10 small $0.20 base $1 table $10

GameDuration

Длительность партии: единая метка с иконкой таймера для текущих и сыгранных игр.

30″ 5′ 2′

Toolbar

Горизонтальная панель для таблиц/листов. Spacer + divider для группировки.

Copy to clipboard — ykCopy

Копирование значения в буфер: текст, input, ID. Кнопка через Button с onclick="return ykCopy(...)".

Текст / код — ykCopy('id')

INV-2025-00142

Input — ykCopy('id') читает .value

Кнопка-иконка — ykCopy(this.previousElementSibling)

0xf3a9b2c1