---
description: Компонент для выделения статусов, категорий и счётчиков рядом с элементами интерфейса.
tags: status
---

<Overview group="data-display">

# ContentBadge [tag:component]

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

</Overview>

{/* @example-description: Базовый `ContentBadge` для короткой статусной метки. */}
<Playground>
  ```jsx
  <ContentBadge>Новинка</ContentBadge>
  ```
</Playground>

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

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

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

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

### Цвет

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

#### `"accent"`

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

{/* @example-description: Цветовая схема `accent` во всех режимах `ContentBadge`. */}
<Playground>
  ```jsx
  <ContentBadge mode="primary" appearance="accent">
    Новинка
  </ContentBadge>
  <ContentBadge mode="secondary" appearance="accent">
    Новинка
  </ContentBadge>
  <ContentBadge mode="outline" appearance="accent">
    Новинка
  </ContentBadge>
  ```
</Playground>

#### `"neutral"`

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

{/* @example-description: Нейтральная цветовая схема `ContentBadge` для разных режимов отображения. */}
<Playground>
  ```jsx
  <ContentBadge mode="primary" appearance="neutral">
    Нет в наличии
  </ContentBadge>
  <ContentBadge mode="secondary" appearance="neutral">
    Нет в наличии
  </ContentBadge>
  <ContentBadge mode="outline" appearance="neutral">
    Нет в наличии
  </ContentBadge>
  ```
</Playground>

#### `"accent-green"`

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

{/* @example-description: Позитивная цветовая схема `accent-green` для статусных бейджей. */}
<Playground>
  ```jsx
  <ContentBadge mode="primary" appearance="accent-green">
    Активно
  </ContentBadge>
  <ContentBadge mode="secondary" appearance="accent-green">
    Активно
  </ContentBadge>
  <ContentBadge mode="outline" appearance="accent-green">
    Активно
  </ContentBadge>
  ```
</Playground>

#### `"accent-red"`

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

{/* @example-description: Акцентная красная схема `accent-red` для приоритетных меток. */}
<Playground>
  ```jsx
  <ContentBadge mode="primary" appearance="accent-red">
    70%
  </ContentBadge>
  <ContentBadge mode="secondary" appearance="accent-red">
    70%
  </ContentBadge>
  <ContentBadge mode="outline" appearance="accent-red">
    70%
  </ContentBadge>
  ```
</Playground>

#### `"overlay"`

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

import { OverlayButtonWrapper } from '@/components/wrappers';

{/* @example-description: Варианты `ContentBadge` поверх медиа-контента с `appearance="overlay"`. */}
<Playground Wrapper={OverlayButtonWrapper}>
  ```jsx
  <ContentBadge mode="primary" appearance="overlay">
    Нет в наличии
  </ContentBadge>
  <ContentBadge mode="secondary" appearance="overlay">
    Нет в наличии
  </ContentBadge>
  <ContentBadge mode="outline" appearance="overlay">
    Нет в наличии
  </ContentBadge>
  ```
</Playground>

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

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

### HEX-коды

{/* @example-description: Пользовательский цвет `ContentBadge` через HEX-значение в `appearance`. */}
<Playground>
  ```jsx
  <ContentBadge mode="primary" appearance="#FF6699">
    Новинка
  </ContentBadge>
  <ContentBadge mode="secondary" appearance="#FF6699">
    Новинка
  </ContentBadge>
  <ContentBadge mode="outline" appearance="#FF6699">
    Новинка
  </ContentBadge>
  ```
</Playground>

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

{/* @example-description: Пользовательский цвет `ContentBadge` через CSS-переменную в `appearance`. */}
<Playground>
  ```jsx
  <div style={{ '--custom-badge-color': '#7B61FF' }}>
    <ContentBadge mode="primary" appearance="var(--custom-badge-color)">
      Новинка
    </ContentBadge>
    <ContentBadge mode="secondary" appearance="var(--custom-badge-color)">
      Новинка
    </ContentBadge>
    <ContentBadge mode="outline" appearance="var(--custom-badge-color)">
      Новинка
    </ContentBadge>
  </div>
  ```
</Playground>

### Скругление

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

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

{/* @example-description: Скругленные бейджи с `capsule` для размеров `m` и `l`. */}
<Playground>
  ```jsx
  <ContentBadge capsule size="m">
    Новинка
  </ContentBadge>
  <ContentBadge capsule size="l">
    Новинка
  </ContentBadge>
  ```
</Playground>

## Размер

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

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

{/* @example-description: Сравнение размеров `s`, `m` и `l` для `ContentBadge`. */}
<Playground>
  ```jsx
  <ContentBadge size="s">Новинка</ContentBadge>
  <ContentBadge size="m">Новинка</ContentBadge>
  <ContentBadge size="l">Новинка</ContentBadge>
  ```
</Playground>

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

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

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

{/* @example-description: Использование `ContentBadge.SlotIcon` с текстом и в формате иконки без текста. */}
<Playground>
  ```jsx
  <ContentBadge size="m" appearance="accent-green">
    <ContentBadge.SlotIcon>
      <Icon12Tag />
    </ContentBadge.SlotIcon>
    Доступно по скидке
  </ContentBadge>
  <ContentBadge size="l" appearance="neutral">
    Заблокировано
    <ContentBadge.SlotIcon>
      <Icon16LockOutline />
    </ContentBadge.SlotIcon>
  </ContentBadge>
  <ContentBadge size="l" appearance="accent-red">
    <ContentBadge.SlotIcon>
      <Icon20CrownVerified />
    </ContentBadge.SlotIcon>
  </ContentBadge>
  ```
</Playground>

## Свойства и методы [#api]

### ContentBadge

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

### ContentBadge.SlotIcon

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