Components

Badge and LevelMeter

Colour-coded labels and a level meter for ordinal values.

A pill-shaped label for a type, a status or a tag — and a level meter for ordinal values such as priority.

Example

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

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

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

<Badge color="#6366f1">Feature</Badge>
<Badge color="#ef4444">Bug</Badge>
<Badge color="#eab308" solid>Solid</Badge>
<Badge>No colour</Badge>

<LevelMeter level={3} color="#f97316" label="Priority: high" />

A colour chosen by the user

A label's colour is set by a person, not by the design system. Both the fill and the text are derived from that single value:

tsx

// the usual variant: translucent fill, the colour goes into the text
backgroundColor: alpha(color, 0.15)
color: color

// solid: an opaque fill, the text colour computed from contrast
backgroundColor: color
color: readableTextOn(color)   // black or white — whichever reads better

The level meter

LevelMeter draws rising bars, filled up to the current value.

Props

Prop	Type	Default	Description
`children`*	`ReactNode`	—	The label's contents.
`color`	`string`	—	A colour in #rrggbb. Without it the label is neutral.
`solid`	`boolean`	`false`	The solid variant: colour as the fill.
`size`	`"sm" \| "md"`	`"sm"`	The size.
`tip`	`string`	—	A tooltip on hover.

children*ReactNode

The label's contents.

colorstring

A colour in #rrggbb. Without it the label is neutral.

solidboolean

defaults to: false

The solid variant: colour as the fill.

size"sm" | "md"

defaults to: "sm"

The size.

tipstring

A tooltip on hover.

LevelMeter: level (from 1), levels (total number of bars, 4 by default), color and label — the caption goes both into the tooltip and into aria-label.