UsageMeter

Server component, no client JSUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { UsageMeter } from '@nizivo/react/unstable/usage-meter';

export function UsageMeterExample(): JSX.Element {
  return (
    <div style={{ display: 'grid', gap: 16, inlineSize: 320 }}>
      <UsageMeter value={640} max={1000} note="Resets on Nov 1 · Upgrade for more" />
      <UsageMeter value={910} max={1000} note="Resets on Nov 1 · Upgrade for more" />
    </div>
  );
}

ImportCopy Anchor Link

import { UsageMeter } from '@nizivo/react/unstable/usage-meter';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css and @nizivo/react/css/meter.css
import '@nizivo/react/css/usage-meter.css';

Static or interactiveCopy Anchor Link

Server. No client JavaScript: it is a native <meter> (Meter). How to choose.

ValuesCopy Anchor Link

value is how much is used and max the allowance; the card shows "640 / 1,000" and a screen reader hears "640 of 1,000 credits used" (labels.valueText, with {value} and {max}). label names it ("AI credits" by default) and note adds a line under the bar.

WarningCopy Anchor Link

From warnAt (0.8, so 80 %) the bar turns to chart/warning: Meter's high range, with optimum at zero, since less used is better. Say what happens next in the note, and never stop people silently when the allowance runs out.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

UsageMeterLabels type

import type { UsageMeterLabels } from '@nizivo/react/unstable/usage-meter'

UsageMeter's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
labelrequired	string	'AI credits'	The visible name, unless label is given.
valueTextrequired	string	'{value} of {max} credits used'	What a screen reader hears for the meter: {value} and {max}.

UsageMeterProps type

import type { UsageMeterProps } from '@nizivo/react/unstable/usage-meter'

The props of UsageMeter, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-meter-track, .nz-usage-meter, .nz-usage-meter-bar, .nz-usage-meter-header, .nz-usage-meter-icon, .nz-usage-meter-label, .nz-usage-meter-note, .nz-usage-meter-value.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.