ContentBadge

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

Загружается...

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

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

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

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

Загружается...

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

Загружается...

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

Загружается...

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

Загружается...

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

Загружается...

Свойство 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.
Загружается...
СвойствоОписание
appearance"accent" | "neutral" | "overlay" | "accent-green" | "accent-red"

Цвет оформления.

По умолчанию: accent
capsuleboolean

Включает приближение значения закругления к форме круга.

По умолчанию: -
getRootRefRef<HTMLDivElement>
По умолчанию: -
modeContentBadgeModeType

Вид отображения.

По умолчанию: primary
sizeContentBadgeSizeType

Определяет отступы и размер текста.

Соответствие размеров иконок в слоте <ContentBadge.SlotIcon />:

  • size=“s” – ⚠️ не поддерживает иконки;
  • size=“m” – при одиночной иконке 16x16, в остальных случаях 12x12;
  • size=“l” – при одиночной иконке 20x20, в остальных случаях 16x16.
По умолчанию: m
weight"1" | "2" | "3"

Задаёт начертание шрифта, отличное от стандартного.

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