Skip to content

Meter

stable

Horizontal bar gauge with low/high threshold markers

Data Display/Storybook ↗
import { Meter } from "@nodus/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

Metadatasemantictypebordersurface
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?