ContentBadge

Компонент для выделения статусов, категорий и счётчиков рядом с элементами интерфейса. Используется в ячейках, кнопках и навигации.

Режим отображения

Определяется свойством mode:

primary — акцентный вариант с заливкой, используется для выделения ключевого статуса, важных меток или основного действия;
secondary — контурный стиль с прозрачным фоном, подходит для второстепенных меток, дополнительных статусов или менее приоритетных элементов;
outline — минималистичный контур без фона, применяется для нейтральных подсказок, неактивных или малозначимых состояний.

Визуальное оформление

Цвет

Определяется свойством appearance.

`"accent"`

Задаёт компоненту акцентный цвет, который может меняться в зависимости от светлой или тёмной схемы.

`"neutral"`

Задаёт компоненту нейтральный цвет, который также может являться альтернативным акцентным цветом компонента.

`"accent-green"`

Значение задаёт компоненту цвет для позитивных статусов (чаще всего зеленый).

`"accent-red"`

Значение задаёт компоненту цвет для “горящих” статусов (чаще всего красных).

`"overlay"`

Значение цвета используется для статусов, располагающихся поверх цветных элементов или фото.

Пользовательские цвета

Используйте свойство appearance для задания произвольного цвета ContentBadge. Поддерживаются:

HEX-коды

CSS-переменные

Скругление

Свойство capsule включает приближение значения закругления к форме круга:

для size="m" и size="l" — приближает к овальной форме;
для size="s" - свойство не поддерживается.

Размер

Определяется свойством size:

s — компактный (только текст, без иконок);
m — стандартный с поддержкой иконок 16px;
l — крупный с иконками 20px.

Работа с иконками

Используйте ContentBadge.SlotIcon для вставки одиночной иконки:

для size="s" - иконки не поддерживаются;
для size="m" — рекомендуемый размер 12px при наличии текста, для одиночной иконки 16px;
для size="l" — рекомендуемый размер 16px при наличии текста, для одиночной иконки 20px.

Свойства и методы

ContentBadge

Свойство	Описание
`appearance`	`ContentBadgeAppearance` Цвет оформления. Помимо предустановленных значений принимает кастомный цвет в формате CSS-переменной (`var(--my-token)`) или HEX (`#RRGGBB`). Применение кастомного цвета по режимам: `mode="primary"` — фон = кастомный цвет, текст/иконка = `--vkui--color_text_contrast` / `--vkui--color_icon_contrast`; `mode="secondary"` — фон = кастомный цвет с прозрачностью 16% (отдельным слоем), текст и иконка = кастомный цвет; `mode="outline"` — бордер, текст и иконка = кастомный цвет. По умолчанию: `accent`
`capsule`	`boolean` Включает приближение значения закругления к форме круга. Note: игнорируется при size=“s”. По умолчанию: `-`
`getRootRef`	`Ref<HTMLDivElement>` По умолчанию: `-`
`mode`	`ContentBadgeModeType` Вид отображения. По умолчанию: `primary`
`size`	`ContentBadgeSizeType` Определяет отступы и размер текста. Соответствие размеров иконок в слоте `<ContentBadge.SlotIcon />`: size=“s” – ⚠️ не поддерживает иконки; size=“m” – при одиночной иконке `16x16`, в остальных случаях `12x12`; size=“l” – при одиночной иконке `20x20`, в остальных случаях `16x16`. По умолчанию: `m`
`weight`	`"1" \| "2" \| "3"` Задаёт начертание шрифта, отличное от стандартного. По умолчанию: `2`

ContentBadge.SlotIcon

Свойство	Описание
`getRootRef`	`Ref<HTMLDivElement>` По умолчанию: `-`

Card

ContentCard