ContentBadge

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

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

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

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

Цвет

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

"accent"

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

"neutral"

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

"accent-green"

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

"accent-red"

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

"overlay"

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

Скругление

Свойство 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.

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