Meter

How much of something there is, on a scale that is known in advance: disk used, seats taken, quota spent. It looks like a progress bar and is not one: the number is already known, and where it sits is what it means.

import { Meter } from 'neba';

<Meter value={38} label="Storage" showValue />;

Props

Prop	Type	Default	Description
value *	number	—	How much there is. Required, and that is the difference from ProgressLinear: a meter reports a quantity that is already known, so there is no indeterminate case
min	number	0	The bottom of the range
max	number	100	The top of the range
thresholds	readonly NebaThreshold[]	—	Where the bar changes colour, as { from, color } entries listed smallest first. The last one the value has reached wins; below all of them color stands
label	ReactNode	—	A name for what is being measured. Read out with the value
showValue	boolean	false	Shows the value as text beside the bar. A share of the range unless format says otherwise
format	Intl.NumberFormatOptions	—	How to write the value. A meter usually has real units, which is when this matters more than it does on a progress bar
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Thickness of the groove, on the same ladder ProgressLinear uses
thickness	number	—	The groove's thickness in pixels. The same prop a ProgressLinear takes
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	The family the bar carries before any threshold is reached

Native <div> attributes pass through to the root. Only color and children are excluded, since the table above spells them differently.

value is required, and that is the difference from ProgressLinear. A progress bar is about time: something is happening, it may have no value at all, and it is expected to move on its own. A meter is about quantity: it does not move unless the thing it measures does.

NebaThreshold

Prop	Type	Default	Description
from *	number	—	The value from which this family applies, in the meter's own units
color * shared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	—	What the bar turns at and above that point

Examples

thresholds

Where the bar changes colour. Each entry is a point on the scale and the family the bar takes from there up; the last one the value has reached wins, and below all of them color stands. List them smallest from first: they are read in the order they are given.

import { useState } from 'react';
import { Meter, Slider } from 'neba';

const thresholds = [
  { from: 70, color: 'warning' },
  { from: 90, color: 'danger' }
] as const;

export default function MeterThresholds() {
  const [used, setUsed] = useState(45);

  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <Meter value={used} label="Disk used" showValue thresholds={thresholds} />
      <Slider
        aria-label="Disk used"
        value={used}
        onValueChange={(value) => setUsed(value as number)}
      />
    </div>
  );
}

min · max · format

showValue prints the reading beside the label. Without a format it is a share of min…max; with one it is the number itself, through Intl.NumberFormat: which is the usual case here, because a meter normally has real units.

import { Meter } from 'neba';

export default function MeterValues() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      <Meter value={12} min={0} max={20} label="Members" showValue />
      <Meter
        value={12}
        min={0}
        max={20}
        label="Members"
        showValue
        format={{ style: 'unit', unit: 'gigabyte', unitDisplay: 'short' }}
      />
      <Meter
        value={4.8}
        min={0}
        max={16}
        label="Memory"
        showValue
        format={{ maximumFractionDigits: 1, style: 'unit', unit: 'gigabyte' }}
      />
    </div>
  );
}

size

size is the thickness of the groove, on the same ladder a ProgressLinear uses, so the two line up when a page carries both.

import { Meter } from 'neba';

const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

export default function MeterSizes() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      {sizes.map((size) => (
        <Meter key={size} size={size} value={62} label={size} showValue />
      ))}
    </div>
  );
}

thickness

The same prop a ProgressLinear takes, and for the same reason: size is a step on the ladder, thickness is a number of pixels.

Accessibility

• Carries role="meter" with the value and range attributes.
• label becomes the accessible name, and aria-valuetext says the same thing as the printed value.
• Colour is never the only carrier: a bar that has crossed a threshold is also longer, and the printed value says the number.