AppMeter
A scalar measurement within a known range — disk usage, a score, remaining quota.
<app-meter value="82" low="60" high="90" optimum="low" label="Disk usage 82%" /><app-meter> reports a single measurement against a known range — how much disk is used, a score out of 100, quota remaining. That's different from <app-progress>, which tracks a task's completion from 0 toward a total over time. A meter is a reading you take at a moment; a progress bar is a journey toward done. Semantically it's role="meter", not role="progressbar".
Give it low/high thresholds and it auto-tones green/amber/red by which end is optimum — without thresholds it keeps whatever tone you pass, exactly like a plain app-progress fill.
It shares app-progress's .progress / .progress-bar markup and theme, so the Razor <app-meter> and the React <AppMeter> render identically on every Webority surface.
Playground
Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the meter above it. Clear low/high to see the fallback tone take over.
A plain meter
With no low/high thresholds, app-meter keeps the tone you pass — the same fallback fill as app-progress.
Show code
<app-meter value="62" tone="info" label="CPU load" show-label="true" />
Threshold auto-toning
Pass low and high and the fill tones itself: which zone counts as good depends on optimum — "high" means bigger is better (a score, uptime), "low" means smaller is better (an error rate, latency).
Show code
<app-meter value="15" low="20" high="80" label="Below threshold" show-label="true" /> <app-meter value="50" low="20" high="80" label="Mid range" show-label="true" /> <app-meter value="90" low="20" high="80" label="Above threshold" show-label="true" />
Show code
<app-meter value="15" low="20" high="80" optimum="low" label="Low error rate" show-label="true" /> <app-meter value="50" low="20" high="80" optimum="low" label="Mid error rate" show-label="true" /> <app-meter value="90" low="20" high="80" optimum="low" label="High error rate" show-label="true" />
A real example: disk usage
More used is worse, so optimum is "low" — the thresholds mark the warning and critical lines an ops dashboard would actually use.
Show code
<app-meter value="92" low="60" high="90" optimum="low" label="Disk usage 92%" show-label="true" />
A visible label
label is always the accessible name (aria-label). Add show-label to also render it inside the fill.
Show code
<app-meter value="40" tone="neutral" label="Quota used" /> <app-meter value="40" tone="neutral" label="Quota used" show-label="true" />
Compact size
size="sm" renders a thin 4px bar for inline or table use, same as app-progress.
Show code
<app-meter value="70" size="sm" tone="success" label="Storage quota" />
<app-meter> is a snapshot of a value within a range. When the number moves upward toward a known total as work happens — an upload, an import, a multi-step job — that's a task, and <app-progress> is the right component.When to use
Use it when
- You have a single measurement within a known min…max range — disk used, a score, remaining quota.
- There are meaningful thresholds where the reading becomes concerning, and you want the colour to say so automatically.
- The value is a state to read at a glance, not a task advancing toward completion.
Reach for something else when
- The value is a task's completion moving toward 100% over time. → app-progress
- A single headline number with an optional trend, not a bar. → app-kpi-tile
- There is no known amount at all — it's just "working". → app-spinner
Best practices
Every option
The whole surface of the component, one cell per resulting value — including every tone the low/high/optimum auto-toning logic can produce and the boundary values (at-or-below low, at-or-above high) that decide which zone a reading falls into.
tone — fallback fill, no thresholds (all five)
tone="info"
tone="success"
tone="warning"
tone="danger"
tone="neutral"
threshold auto-tone — optimum="high" (bigger is better): every resulting tone
value=10, low=20, high=80 → below low → dangervalue=20 (== low) → at-or-below low → dangervalue=50 → between low and high → warningvalue=80 (== high) → at-or-above high → successvalue=90, low=20, high=80 → above high → successthreshold auto-tone — optimum="low" (smaller is better): every resulting tone
value=10, low=20, high=80, optimum="low" → below low → successvalue=20 (== low) → at-or-below low → successvalue=50 → between low and high → warningvalue=80 (== high) → at-or-above high → dangervalue=90, low=20, high=80, optimum="low" → above high → dangersize
size="sm"
size="md"
label / show-label
(no label)label only (accessible name, not rendered)label + show-label (rendered inside the fill)show-label with a long label — overflow inside the fillvalue clamping — out-of-range input
value=-25, min=0, max=100 → clamped to 0%value=250, min=0, max=100 → clamped to 100%Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
| value * | number | — | The measurement (min…max); clamped into range. |
| min | number | 0 | Range floor. |
| max | number | 100 | Range ceiling. |
| tone | info | success | warning | danger | neutral | info | Fallback fill when no low/high thresholds are given. |
| optimum | high | low | high | Which end is good — high = bigger is better. |
| low | number | — | At-or-below this value is the low zone. |
| high | number | — | At-or-above this value is the high zone. |
| size | sm | md | md | Bar thickness. |
| label | string | — | Accessible name; also shown in the bar when show-label. |
| show-label | bool | false | Render the label text inside the bar. |