Skip to main content
PROYECTOVIVIANA

Meter

Meter represents a quantity within a known range, such as disk usage, signal strength, or a relevance score. Unlike ProgressBar, Meter displays a static value rather than tracking progress toward completion.

Import

import { Meter } from '@proyecto-viviana/solid-spectrum';

Basic Meter

A simple meter showing a value within a range. The interactive demo simulates adding and removing files from storage.

Cloud Storage
73 GB of 100 GB

Storage is getting low.

const [storageUsed, setStorageUsed] = createSignal(73);

<Meter
  label="Storage"
  value={storageUsed()}
  variant={storageUsed() >= 90 ? 'negative' : storageUsed() >= 70 ? 'notice' : 'positive'}
  valueLabel={`${storageUsed()}% used`}
/>

Variants

Meters use color to communicate semantic meaning. Use different variants to indicate the health or status of the measured quantity.

CPU Usage
25%
Memory
65%
Bandwidth
78%
Error Rate
92%
<Meter label="CPU Usage" value={25} variant="positive" />
<Meter label="Memory" value={65} variant="informative" />
<Meter label="Bandwidth" value={78} variant="notice" />
<Meter label="Error Rate" value={92} variant="negative" />

Sizes

Meters are available in multiple sizes to fit different contexts.

Small
40%
Medium
60%
Large
75%
Extra Large
85%
<Meter label="Small" value={40} size="S" />
<Meter label="Medium" value={60} size="M" />
<Meter label="Large" value={75} size="L" />
<Meter label="Extra Large" value={85} size="XL" />

Without Visible Label

When the context makes the purpose clear, use aria-label instead of a visible label.

Password strength:

Battery level:

Signal strength:

<Meter aria-label="Password strength" value={60} variant="notice" />
<Meter aria-label="Battery level" value={85} variant="positive" />

Custom Range and Labels

Set custom minimum and maximum values, and display custom value labels.

Temperature
72 F
Customer Satisfaction
4.2 / 5.0
Relevance Score
850 / 1000
<Meter label="Temperature" value={72} minValue={32} maxValue={100} valueLabel="72 F" />
<Meter label="Satisfaction" value={4.2} minValue={1} maxValue={5} valueLabel="4.2 / 5" />

Props

PropTypeDefaultDescription
valuenumber—Current meter value
labelstring—Visible label displayed above the meter
variant'informative' | 'positive' | 'notice' | 'negative''informative'Color variant to communicate semantic meaning
size'S' | 'M' | 'L' | 'XL''M'Size of the meter bar
minValuenumber0Minimum value of the range
maxValuenumber100Maximum value of the range
valueLabelReactNode—Custom text to display as the value (overrides default percentage)
aria-labelstring—Accessible label when no visible label is provided

Accessibility

  • Uses role="meter"
  • Exposes aria-valuenow, aria-valuemin, and aria-valuemax
  • Label is linked via aria-labelledby for screen reader association
  • Custom value labels are exposed as aria-valuetext
  • Distinct from progress bars: meters represent a static measurement, not ongoing progress
  • Color is not the sole indicator of meaning; labels provide context