Badge

Badge — составной компонент для небольшой подписи рядом с содержимым: статус, тип, метка.

Badge.Root задаёт цвет, размер и скругление, части внутри него свободно комбинируются: Badge.Icon и Badge.Label можно переставлять и использовать по одной.

Компонент неинтерактивный — это span, а не кнопка: клик, удаление метки и прочие действия вешает потребитель на свою обёртку.

Смысловой вариант — задаёт цвет: primary — акцент, secondary — второстепенная метка, success / warning / danger — семантические статусы, default — нейтральная.

Внешний вид: solid — сплошная заливка, outline — обводка без заливки, dashed — та же обводка пунктиром, ghost — приглушённая подложка цветом варианта.

Размер задаётся на Badge.Root и управляет высотой, отступами и шрифтом бейджа; иконка масштабируется вместе с текстом. xs — для плотных списков и таблиц, sm — базовый, md — для заголовков, lg и xl — для акцентных подписей.

Скругление углов — от прямых none до circle («таблетка»).

Badge.Icon — иконка рядом с текстом; порядок задаёт разметка, так что иконка может стоять и справа от Badge.Label. Без текста бейдж сжимается до одной иконки.

color — цвет бейджа для меток вне стандартного набора вариантов, принимает любое CSS-значение и перекрывает цвет из variant. Цвет текста при сплошной заливке подбирается автоматически: на светлом фоне — чёрный, на тёмном — белый.

Пользовательские метки (теги задачи, категории) — цвет закрепляется за текстом хелпером getStableColor, так метка выглядит одинаково во всех списках.

Иконка рядом с текстом — масштабируется вместе с ним и не сжимается.

Текст бейджа; обрезается многоточием, если не влезает.