Vanilla Breeze

meter

Displays a scalar measurement within a known range, like a gauge. The meter automatically changes color based on whether the value is in the optimum, suboptimum, or poor range.

When to Use

  • Displaying disk space usage
  • Password strength indicators
  • Poll results or voting percentages
  • Budget utilization
  • Score or rating displays

Use progress instead for tasks that are in progress (like file uploads or loading states).

Basic Usage

A simple meter showing a value within a range.

Meter Attributes

Attribute Purpose Default
value Current value (required) -
min Minimum possible value 0
max Maximum possible value 1
low Upper bound of low range min
high Lower bound of high range max
optimum Optimal value (affects color) midpoint

Optimum Range Behavior

The meter's color changes automatically based on where the value falls relative to the optimum attribute. Set optimum low for "less is better" metrics (CPU, disk usage) or high for "more is better" metrics (skills, scores). No classes or JavaScript needed — the browser handles the color logic.

Size Variants

Different heights for various contexts.

Labeled Meter

Use the .labeled wrapper pattern for meters with value displays.

Accessibility Notes

  • Include fallback text: Content between tags is shown if meter is not supported
  • Use labels: Always associate a label with the meter
  • Provide context: Include units or percentages in visible text
  • Don't rely on color alone: Accompany color changes with text indicators
  • Screen reader support: Meters are announced as "X out of Y"

Meter vs Progress

Use meter Use progress
Static measurements Tasks in progress
Disk space, battery level File uploads, loading
Has optimum value ranges Has determinate/indeterminate states
Gauge-like display Progress bar display

CSS Reference

Related

  • progress - For task completion (loading, uploading)
  • output - Display calculated values
  • label - Label for the meter
↑