Skip to contentSkip to navigation
DocsDocs

Meter

A measurement within a known range, such as the storage used of a quota.

StableSince 1.0.0
On this page

Overview

Show code, SeatsAssigned.tsx

Anatomy

  1. Meter

  2. Label

  3. Value

  4. Track

  5. Indicator

Show code, MeterAnatomy.tsx

Behaviour

Out of range

A value outside the range shows as its nearest end.

Adapting to width

A meter fills its container. The label and the value wrap onto two lines where they don't fit.

Show code, LongLabel.tsx

Rules

A meter has no warning color of its own, so say in text when a limit is reached.

Use it when

  • A quantity within a known range, such as storage used of a quota
  • Several limits compared at a glance, such as a plan's seats and projects
DoSay in text what a full meter means.
Show code, PlanUsage.tsx
Don’tA full bar left to speak for itself: it has no warning color.
Show code, FullWithoutWords.tsx

Content

Name what is measured in the label, such as Seats assigned.

Related

  • How much of a task is done, such as an upload or an import.

  • A key figure without a range, such as the active projects this month.

  • A value people set within a range, such as a volume or a limit.

  • A score on a scale of stars, such as a review's 4.5 out of 5.