Meter — ARC UI

Components

Meter

data

static

<arc-meter>

Overview

Guidelines

When to use

Set `low`, `high`, and `optimum` to match the semantic meaning of your data (e.g. optimum near max for battery level)
Provide a `label` so users understand what the meter represents and can read the percentage
Use Meter for known-range scalar values like disk usage, battery level, signal strength, or performance scores
Update the `value` prop reactively to reflect real-time data changes with smooth animations
Pair Meter with adjacent text or tooltips to explain what the color zones mean in your context

When not to use

Do not use Meter for indeterminate progress -- use Progress with an indeterminate state instead
Do not use Meter for task completion tracking -- use Progress for sequential step-based workflows
Do not set `min` equal to or greater than `max` -- the fill calculation returns 0% in that case
Do not rely on color alone to convey the zone meaning -- always include a label or supplementary text
Avoid using Meter for binary states (pass/fail) -- use a Badge or status indicator instead

Features

Color-coded fill bar: green (success) when the value is in the optimal zone, yellow (warning) for intermediate, red (error) for critical
Configurable `low`, `high`, and `optimum` thresholds mirroring the HTML `<meter>` algorithm
Header row showing label text and current percentage in monospace font when `label` is set
Animated fill width and color transitions using the theme base timing function
Automatic zone calculation with sensible third-based defaults when thresholds are omitted
Semantic `role="meter"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`
Rounded 8px track with `bg-elevated` background matching the design system surface palette
Value clamped between `min` and `max` -- out-of-range values are handled gracefully

Preview

Usage

<arc-meter
  label="Disk Usage"
  value="72"
  min="0"
  max="100"
  low="50"
  high="80"
  optimum="0"
></arc-meter>

import { Meter } from '@arclux/arc-ui-react';

<Meter
  label="Disk Usage"
  value={72}
  min={0}
  max={100}
  low={50}
  high={80}
  optimum={0}
/>

<script setup>
import { Meter } from '@arclux/arc-ui-vue';
</script>

<template>
  <Meter
    label="Disk Usage"
    :value="72"
    :min="0"
    :max="100"
    :low="50"
    :high="80"
    :optimum="0"
  />
</template>

<script>
  import { Meter } from '@arclux/arc-ui-svelte';
</script>

<Meter
  label="Disk Usage"
  value={72}
  min={0}
  max={100}
  low={50}
  high={80}
  optimum={0}
/>

import { Component } from '@angular/core';
import { Meter } from '@arclux/arc-ui-angular';

@Component({
  imports: [Meter],
  template: `
    <Meter
      label="Disk Usage"
      [value]="72"
      [min]="0"
      [max]="100"
      [low]="50"
      [high]="80"
      [optimum]="0"
    ></Meter>
  `,
})
export class MyComponent {}

import { Meter } from '@arclux/arc-ui-solid';

<Meter
  label="Disk Usage"
  value={72}
  min={0}
  max={100}
  low={50}
  high={80}
  optimum={0}
/>

import { Meter } from '@arclux/arc-ui-preact';

<Meter
  label="Disk Usage"
  value={72}
  min={0}
  max={100}
  low={50}
  high={80}
  optimum={0}
/>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-meter — requires meter.css + tokens.css (or arc-ui.css) -->
<div class="arc-meter">
  <div
    class="meter"
    role="meter"
    aria-valuemin="Min"
    aria-valuemax="Max"
    aria-valuenow="Value"
    aria-label="Label"
  >
    Label
    <div class="meter__track">
      <div
        class="meter__fill meter__fill--"
        style="width: %"
      ></div>
    </div>
  </div>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-meter — self-contained, no external CSS needed -->
<style>
  @media (prefers-reduced-motion: reduce) {
    .arc-meter *,
        .arc-meter *::before,
        .arc-meter *::after { animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important; }
  }
</style>
<div class="arc-meter" style="display: block">
  <div
    style="display: flex; flex-direction: column; gap: 4px"
    role="meter"
    aria-valuemin="Min"
    aria-valuemax="Max"
    aria-valuenow="Value"
    aria-label="Label"
  >
    Label
    <div style="position: relative; width: 100%; height: 8px; background: rgb(26, 26, 80); border-radius: 9999px; overflow: hidden">
      <div

        style="width: %"
      ></div>
    </div>
  </div>
</div>

API

Prop	Type	Default	Description
`value`	`number`	`0`	Current meter value. Clamped between `min` and `max`. Reflected as an attribute.
`min`	`number`	`0`	Minimum value representing the left edge (empty) of the meter.
`max`	`number`	`100`	Maximum value representing the right edge (full) of the meter.
`low`	`number`	`min + range * 0.33`	Threshold below which the value is considered low. Used for color zone calculation.
`high`	`number`	`min + range * 0.67`	Threshold above which the value is considered high. Used for color zone calculation.
`optimum`	`number`	`(low + high) / 2`	The optimal value. Determines which end of the range is "good" for color zone logic.
`label`	`string`	`''`	Label text displayed in the header row alongside the current percentage.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight