Компоненты

Badge и LevelMeter

Метки в цвете и шкала уровня для порядковых величин.

Метка-«пилюля» для типа, статуса и тега — и шкала уровня для порядковых величин вроде приоритета.

Пример

ФичаБагРефакторингИсследованиеБез цвета

Жёлтый плотныйТёмный плотный

import { Badge, LevelMeter } from "@toimetdev/pathlogs-core";

<Badge color="#6366f1">Фича</Badge>
<Badge color="#ef4444">Баг</Badge>
<Badge color="#eab308" solid>Плотный</Badge>
<Badge>Без цвета</Badge>

<LevelMeter level={3} color="#f97316" label="Приоритет: высокий" />

Цвет от пользователя

Цвет метки задаёт человек, а не дизайн-система. Из одного значения выводятся и заливка, и текст:

tsx

// обычный вариант: заливка полупрозрачная, цвет идёт в текст
backgroundColor: alpha(color, 0.15)
color: color

// solid: заливка сплошная, цвет текста считается по контрасту
backgroundColor: color
color: readableTextOn(color)   // чёрный или белый — что читаемее

Шкала уровня

LevelMeter рисует возрастающие столбики, заполненные до текущего значения.

Пропсы

Проп	Тип	По умолчанию	Описание
`children`*	`ReactNode`	—	Содержимое метки.
`color`	`string`	—	Цвет в #rrggbb. Без него метка нейтральная.
`solid`	`boolean`	`false`	Плотный вариант: цвет заливкой.
`size`	`"sm" \| "md"`	`"sm"`	Размер.
`tip`	`string`	—	Подсказка при наведении.

children*ReactNode

Содержимое метки.

colorstring

Цвет в #rrggbb. Без него метка нейтральная.

solidboolean

по умолчанию: false

Плотный вариант: цвет заливкой.

size"sm" | "md"

по умолчанию: "sm"

Размер.

tipstring

Подсказка при наведении.

LevelMeter: level (с 1), levels (всего столбиков, по умолчанию 4), color и label — подпись идёт и в подсказку, и в aria-label.