Skip to content

Meter

stable

Horizontal bar gauge with low/high threshold markers

Data Display/Storybook ↗
import { Meter } from "@danagraph/design-system"
Loading demo…

Props

valuerequired
Type numberDefault —

Current meter value

min
Type numberDefault 0

Minimum range

max
Type numberDefault 100

Maximum range

low
Type numberDefault —

Below this value uses temporal color

high
Type numberDefault —

Above this value uses agency color

label
Type stringDefault —

Label above the meter

showValue
Type booleanDefault true

Display numeric value

semantictypebordersurface
MobileWorks As-Is

Meter fills its container width. Works at any viewport — no special handling needed.

Design Rationale

This component was designed to express:

Explore Related

Was this helpful?