Feedback

Meter

Bounded measurement gauge with meter semantics for readings like battery, quota, CPU, and memory utilization.

import { Meter } from '@lostgradient/cinder/meter';
feedbackmeasurementgauge
01

Overview

Bounded measurement gauge for fluctuating values like battery, quota, CPU, and memory usage.

Use Meter for static measurements with known bounds (role="meter"). Use Progress for task completion over time (role="progressbar").

Usage

svelte 
<script lang="ts">
  import Meter from '@lostgradient/cinder/meter';
</script>

<Meter value={52} ariaLabel="Battery level" />

For a measurement that has no numeric reading, provide an unknown verdict. Its label is rendered next to the empty track and included in the status's accessible name. Known verdict levels keep role="meter", the numeric fill, and expose the verdict label through aria-valuetext.

svelte 
<Meter verdict={{ level: 'unknown', label: 'Awaiting data' }} ariaLabel="Service health" />
Live preview
Awaiting estimate
02

When to use

Use when
  • Showing a fluctuating value within a known minimum and maximum range.
  • Communicating low/optimal/high regions of a bounded measurement.
Avoid when
03

Examples

Basic meter

Bounded measurement for a fluctuating value.

Custom range

Map the meter to a non-zero bounded range.

Segmented thresholds

Render low, optimal, and high regions while preserving meter semantics for assistive technology.

04

Props

Props for meter
Name
Type
Default
Description
verdict { level: MeterVerdictLevel; label: string; } Semantic label for a measurement; unknown represents the non-numeric status case.
value number 0 Current measurement value. Defaults to 0.
min number Lower bound for the range. Defaults to 0.
max number Upper bound for the range. Defaults to 100.
low number Lower threshold boundary for segmented rendering.
high number Upper threshold boundary for segmented rendering.
optimum number Optimal target value. Influences computed state semantics to match native meter expectations.
size 'sm' | 'md' | 'lg' 'md' Size token for track height. Default md.
ariaValueText text Human-readable text exposed via aria-valuetext. When omitted, aria-valuetext is not rendered. Example: 50% (6 hours remaining).
ariaLabel text Accessible name applied directly to the meter element when no visible label element is present.
ariaLabelledby text Id of a visible element that serves as the accessible name for the meter. Prefer this when a visible label exists.
05

Accessibility