Components › Records & data › Stat tile › Meter

Meter

canon

A thin static bar showing how full something is against a limit or a goal; the value stands next to it as text.

AD 26 Sep 2026 (wave B inventory): Meter and Progress are two legitimate elements, the same pair as HTML <meter> vs <progress>. Meter = a static ratio to a limit or goal (budget drawn, room occupancy, KPI, progress to promotion, project done/total, portfolio weight); Progress = work running now that ends done or failed. 7 uses on main (Rozpočty ×2, Zasedačky, Tým detail, Člen týmu KPI + Rozpočty, Portfolio výsledky, StatTile pct); Kariéra (.kar-bar, acrm !3898) and the public project page (ProgressBar.tsx deleted, .dp-*, acrm !3900) were migrated onto it on 27 Sep 2026. Moved into @acrm/ui on 27 Sep 2026 (acrm !3929: Meter + usageTone, CSS layer ds/meter.css, stories with baseline, zero visual change on 776 snapshots). TaskList .tl-prog turned out to be dead API (no screen passed progress/pct) and is deleted (acrm !3947). Track = --border like Progress — approved by the owner 27 Sep 2026 (preview meter-draha: the --surface-75 track was practically invisible on white cards). Registry repaired 17 Oct 2026 (review F3): mapped existing Ladle stories.

Used in 19 files · 15 areas · 23× — components/StatTile, components/agent-desk, components/assistant, components/clen-tymu, components/mail, components/meetings …

@acrm/ui <Meter>.fin-bar .fin-bar-fill .fin-bar-fill.warn .fin-bar-fill.critSourceStory
ExamplesCodeUsageAccessibilityChangelog

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.
  • 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.

Source: docs/stat-tile/meter.usage.md · GitLab