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
.
Свойства и методы
ContentBadge
Свойство | Описание |
---|---|
appearance | "accent" | "neutral" | "overlay" | "accent-green" | "accent-red" Цвет оформления. По умолчанию: accent |
capsule | boolean Включает приближение значения закругления к форме круга. По умолчанию: - |
getRootRef | Ref<HTMLDivElement> По умолчанию: - |
mode | ContentBadgeModeType Вид отображения. По умолчанию: primary |
size | ContentBadgeSizeType Определяет отступы и размер текста. Соответствие размеров иконок в слоте
По умолчанию: m |
weight | "1" | "2" | "3" Задаёт начертание шрифта, отличное от стандартного. По умолчанию: 2 |
ContentBadge.SlotIcon
Свойство | Описание |
---|---|
getRootRef | Ref<HTMLDivElement> По умолчанию: - |