Meter

A thin static bar that shows how full something is against a limit or a goal. The value itself stands next to it as text; the bar only lets the eye compare.

When to use

• A ratio to a limit or a goal that does not run by itself: budget drawn, room occupancy, KPI to target, progress to promotion, share in a portfolio, project done / total tasks.
• Inside a Stat tile, a row or a card, next to the number it visualises.

When not to use

• Work that is running now and will finish or fail (extraction, transcription, import) — that is Progress.
• A distribution of several parts (demography, speaking time, the make-up of spending) — that is a chart, not a meter.
• Position in a wizard — that is the wizard's stepper.

Anatomy

1. Track — .fin-bar, 6px, pill radius; size="sm" = 4px (.fin-bar.sm) for dense rows — meeting rail speaker share, list cells (2 Oct 2026). Same track tone (--border) and fills; the host gives the width.
2. Fill — .fin-bar-fill, width = the percentage clamped to 0–100; positive by default, warn above 80 %, crit above 100 % (usageTone), or a colour passed by the host (KPI: reached = --positive, otherwise --accent).

Best practices

Do

• Put the number next to the bar as text („62 %", „124 000 z 200 000 Kč").
• Use usageTone for anything that can be overdrawn, so the thresholds are the same everywhere.

Don't

• Don't draw a bar of your own (.xxx-bar) — use <Meter>. A thinner bar is size="sm", never a class that overrides the height.
• Don't give it a label of its own; the host's text is the label.

Content

• The value next to the bar: the number the bar shows, in the same unit.

Related

• Progress, Stat tile.

Threshold mark (acrm !4414, 2. 10. 2026)

• mark?: number (0–100, clipped): a vertical mark for a threshold or limit (AI decision threshold, budget limit). 2 px --fg, over the track height with 2 px overshoot above and below, separated from the fill by a 1 px gap in the surface colour; stays inside the rounded track at 0 and 100.
• Readable on the positive fill, the warn fill and the empty track in both themes (≥ 3 : 1 at the edge against both neighbours; light: mark × positive 5.67, × warn 9.76, × track 15.29; dark: the dark gap carries the edge — × positive 5.50, × warn 9.45).
• markLabel is appended to ariaLabel („Jistota 72 %, práh 60 %“); without ariaLabel the bar stays decorative and the threshold must be in the host text.
• One bar for static ratios in the app: no local copies with their own threshold (e.g. .prof-bar-track, .whyp-mini-threshold) — migrate them to Meter.