Meter

Semantic gauge display with color-coded fill zones (success, warning, error) based on configurable low/high/optimum thresholds.

Components

Meter

data

static

<arc-meter>

Overview

Meter is a visual gauge that represents a scalar value within a known range, similar to the native HTML `<meter>` element but with ARC UI styling and full theme integration. The component renders a rounded track with an animated fill bar whose color changes based on the value's relationship to configurable thresholds. When a `label` is provided, a header row displays the label on the left and the current percentage on the right in monospace font. The color logic mirrors the HTML meter algorithm using three thresholds: `low`, `high`, and `optimum`. When the optimum is in the high segment (e.g. battery level), values above `high` render in green (success), values between `low` and `high` in yellow (warning), and values below `low` in red (error). When the optimum is in the low segment (e.g. error count), the logic inverts — low values are green and high values are red. If thresholds are not explicitly set, the component divides the range into sensible thirds. Meter uses `role="meter"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` for full accessibility. The fill width and color transitions are animated using the theme's base transition timing, creating smooth visual updates when the value changes programmatically.

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';

export default function Example() {
  return (
    <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: `
    <arc-meter
      label="Disk Usage"
      [value]="72"
      [min]="0"
      [max]="100"
      [low]="50"
      [high]="80"
      [optimum]="0"
    ></arc-meter>
  `,
})
export class MyComponent {}

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

export default function Example() {
  return (
    <Meter
      label="Disk Usage"
      value={72}
      min={0}
      max={100}
      low={50}
      high={80}
      optimum={0}
    />
  );
}

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

export default function Example() {
  return (
    <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

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 =undefined: Threshold below which the value is considered low. Used for color zone calculation.
high number =undefined: Threshold above which the value is considered high. Used for color zone calculation.
optimum number =undefined: 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.

Meter

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

Docs

Project

Arclight