Propel

Meter

A static gauge that graphs a numeric value within a known range.

Basic

Disk usage
x
Show code
import { Meter } from "@makeplane/propel/components/meter";

export default function BasicDemo() {
  return <Meter value={64} label="Disk usage" />;
}

Levels

Storage used
x
Storage used
x
Storage used
x
Show code
import { Meter } from "@makeplane/propel/components/meter";

export default function LevelsDemo() {
  return (
    <div className="flex flex-col gap-4">
      {[15, 50, 90].map((value) => (
        <Meter key={value} value={value} label="Storage used" />
      ))}
    </div>
  );
}

Formatted value

The format prop takes Intl.NumberFormatOptions; here the readout is shown as a percentage.

Seats used
x
Show code
import { Meter } from "@makeplane/propel/components/meter";

export default function FormattedDemo() {
  return <Meter value={0.42} max={1} label="Seats used" format={{ style: "percent" }} />;
}

Thresholds

low, high, and optimum set the color breakpoints, so the fill reflects which segment the value falls in.

Low (warning)
x
Middle (warning)
x
High (success)
x
Show code
import { Meter } from "@makeplane/propel/components/meter";

export default function ThresholdsDemo() {
  return (
    <div className="flex flex-col gap-4">
      <Meter value={10} label="Low (warning)" low={25} high={75} optimum={90} />
      <Meter value={50} label="Middle (warning)" low={25} high={75} optimum={90} />
      <Meter value={90} label="High (success)" low={25} high={75} optimum={90} />
    </div>
  );
}

Without value

showValue={false} hides the readout text; the gauge still announces its value to assistive tech.

Disk usage
x
Show code
import { Meter } from "@makeplane/propel/components/meter";

export default function NoValueDemo() {
  return <Meter value={64} label="Disk usage" showValue={false} />;
}

Installation

import { Meter } from "@makeplane/propel/components/meter";

Props

Meter

PropTypeRequiredDescription
labelstringNoOptional visible label rendered above the track (e.g. "Disk usage"). When omitted, provide an `aria-label` so the gauge is still named for assistive tech.
showValuebooleanNoWhether to show the formatted value text alongside the label.
lownumberNoThe threshold below which the value is considered "low" (suboptimal). Values below this threshold display the warning fill color. Mirrors the native `<meter low>` attribute. Defaults to `min`.
highnumberNoThe threshold above which the value is considered "high" (suboptimal). Values above this threshold display the success fill color. Mirrors the native `<meter high>` attribute. Defaults to `max`.
optimumnumberNoThe value considered optimal. Together with `low` and `high`, this determines whether the optimal range is at the low end, the middle, or the high end of the range. Mirrors the native `<meter optimum>` attribute. When omitted the middle range is treated as optimal (accent fill).