Numbers and data

Meter

How full something is. With tone auto, a limit turns amber from 75 % and red from 90 %.

openvibe-shared/kitJSON

Build it

kit.meter({ value: 62, max: 100, label: 'Storage', text: '6.2 of 10 GB' }) + kit.meter({ value: 93, max: 100, label: 'Uploads today', text: '93 of 100', tone: 'auto' })

Props

max
number?
text
string?
tone
string?
label
string?
value
number?

Anatomy

  • meterHow full something is. With tone auto, a limit turns amber from 75 % and red from 90 %.

Behaviour and access

Keyboard
Standard focus order
Outside tap
Leaves it open
Scroll
The page still scrolls
Reduced motion
Remove movement; keep the state change.
Name
Meter
Target
At least 44 × 44 px on touch
Focus
Visible keyboard focus; follow reading order

States

  • default
  • uploading
  • complete

Tokens

  • color.accent.base
  • color.text.primary

Android · Jetpack Compose

Material 3 Meter

Use Meter in Jetpack Compose with the shared tokens.

iOS · SwiftUI

Use Meter in SwiftUI with the shared tokens.

Markup

Default

<span class="ovk-meter" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="62" aria-label="Storage" aria-valuetext="6.2 of 10 GB"><span style="--v:0.620"></span></span><span class="ovk-meter ovk-meter--bad" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="93" aria-label="Uploads today" aria-valuetext="93 of 100"><span style="--v:0.930"></span></span>