04 · Components · Stable

Badge

Статический индикатор счётчика или факта наличия обновления. Не кликабелен, не содержит интерактивных состояний. Единая семантическая палитра из 6 цветов.

Варианты

2 визуальных стиля
Badge / Solid
Atoms · Indicator
Stable
Акцентный счётчик с насыщенным фоном. Критические статусы. Включает Dot-тип.
SM · MD 6 семантик Solid + Dot
SIZE_BASED · Статический
Badge / Soft
Atoms · Indicator
Stable
Мягкий счётчик с тонированным фоном. High Contrast для серых поверхностей.
SM · MD 6 семантик High Contrast
SIZE_BASED · Dark ✓

Стили Badge — Solid, Soft, Dot

6 семантик × 3 размера
Стиль / Размер
Neutral
Brand
Info
Positive
Negative
Warning
Solid · SM
16px · 10px · 500
12
3
7
2
5
1
Solid · MD
20px · 11px
12
3
7
2
5
1
Soft · SM
12
3
7
2
5
1
Soft · MD
12
3
7
2
5
1
Soft HC · SM
High Contrast
12
3
7
2
5
1
Soft HC · MD
High Contrast
12
3
7
2
5
1
Dot · 8px
Disabled
5 12 Когда родительский компонент в состоянии Disable

Размеры Badge

SM · MD
Свойство
SM
MD
Height
16px
20px
Min-width
16px
20px
Padding X
4px
5px
Font
10px 500
11px 500
Max символов
4 символа. «+999», «-999», «1K» — предельные значения.

Анатомия Badge

Контейнер · Значение
Solid · Negative · MD
12
Soft · Info · MD
7
Dot · Brand
1
Контейнер
Форма и границы. Скругление pill (9999px) для Solid/Soft. Dot — фиксированный круг 8px. Ширина автоматически подстраивается под контент.
2
Числовое значение
Только арабские цифры и символы «+», «-», «K». Максимум 4 символа. Значения +999 и -999 — число вышло за отображаемый диапазон. Dot не содержит текста.

Правила Badge

Поведение · Доступность
Применение

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

  • Навигация, меню — счётчик непрочитанных уведомлений или новых разделов
  • Уведомления — количество сообщений на иконках в шапке или табах
  • Dot — только в Icon Only компонентах, когда точное число не важно

Метка временная — убирай после просмотра пользователем.

Ограничения

Чего избегать

  • Не делай Badge кликабельным — он статический
  • Не забывай скрывать Dot после просмотра контента
  • Не перегружай интерфейс — много Badge = визуальный шум
  • Не ставь большой Badge на маленькую иконку — перекроет её
  • Не используй вместо Tag для категоризации
Доступность

ARIA для Badge

  • Нет фокуса клавиатуры (tabindex не нужен)
  • aria-label на самом Badge: "3 новых уведомления"
  • Или aria-describedby для связи с родителем
  • Для типа Dot — aria-label обязателен
High Contrast

Soft на сером фоне

Если Soft/Neutral Badge на сером фоне недостаточно контрастен — применяй High Contrast. Компонент получает белый фон (Light) / тёмный фон (Dark).

Normal: 12 → High Contrast: 12

State Explorer

Интерактивный тест состояний — переключай и смотри