Meter

Server component, no client JS

ImportCopy Anchor Link

import { Meter } from '@nizivo/react/meter';

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

Static or interactiveCopy Anchor Link

Server. It ships no client JavaScript when a Server Component renders it, in every Next.js build mode; its code is bundled only when a client component (a 'use client' file) imports it. How to choose.

In a client app (a Vite or React Router single-page app, or a 'use client' file) it is an ordinary React component: event handlers, refs and state work as usual. In a client app.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Meter } from '@nizivo/react/meter';

export function MeterExample(): JSX.Element {
  return (
    <div>
      {/* usage: high is bad, so the optimum is the minimum */}
      <Meter label="Plan storage" value={86} high={80} optimum={0} />
      {/* stock: low is bad, so the optimum is the maximum */}
      <Meter label="Low stock" value={12} low={20} high={50} optimum={100} />
      <Meter label="Used" value={310} max={500} valueText="310 / 500" />
    </div>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

MeterProps type

import type { MeterProps } from '@nizivo/react/meter'

The props of Meter, listed above.

MeterState type

import type { MeterState } from '@nizivo/react/meter'

The render state of Meter, listed above.

MeterTone type

import type { MeterTone } from '@nizivo/react/meter'

The colour of the optimum region. Outside it the browser's ranges pick warning, then critical.

type MeterTone = "brand" | "success" | "warning" | "critical" | "neutral"

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, .nz-meter-header, .nz-meter-label, .nz-meter-track, .nz-meter-value.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

In forced-colours mode these states keep a visible system colour: meter-track::-webkit-meter-optimum-value (fill), meter-track::-webkit-meter-suboptimum-value (fill), meter-track::-webkit-meter-even-less-good-value (fill), meter-track::-moz-meter-bar (fill).

KeyboardCopy Anchor Link

None.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: none
• Ghost masters: none