Meter

A reading inside a known range, such as disk space or a score: a neutral track with a bar in the tone, rendered on the server.

server - 0 KB

Meter

server - 0 KB

A reading inside a known range, such as disk space or a score: a neutral track with a bar in the tone, rendered on the server.

Install

Battery

The code

meter.tsx

import { Meter } from 'topclassui/meter'

/** The docs sample: the visible text names the meter, which reads 60 of 0 to 100. */
export default function Demo() {
  return (
    <div className="grid max-w-sm gap-2">
      <span id="battery-label" className="text-sm">Battery</span>
      <Meter value={60} aria-labelledby="battery-label" />
    </div>
  )
}

It renders no text, so name it with aria-label or aria-labelledby; the type refuses a Meter with neither.

Import from the package

topclassui/meter

import { Meter } from 'topclassui/meter'

Install once:npm i topclassui@beta zod

Examples

For a task moving towards done, use Progress; Meter is a reading, with min, max and value of its own.
min and max are clamped, max is raised to min when below it, and value is held between the two.
aria-valuetext is passed through, so a screen reader says "512 GB of 1 TB" instead of "512".
The track fills its container and is never narrower than 4rem; give it a width of its own with className.

basic

Battery

basic.tsx

import { Meter } from 'topclassui/meter'

/** The docs sample: the visible text names the meter, which reads 60 of 0 to 100. */
export default function Demo() {
  return (
    <div className="grid max-w-sm gap-2">
      <span id="battery-label" className="text-sm">Battery</span>
      <Meter value={60} aria-labelledby="battery-label" />
    </div>
  )
}

range

Disk: 512 GB of 1 TB

range.tsx

import { Meter } from 'topclassui/meter'

/** A range of its own: 512 of 1024 GB fills half the track, and the value text says it in units. */
export default function Demo() {
  return (
    <div className="grid max-w-sm gap-2">
      <span id="disk-label" className="text-sm">Disk: 512 GB of 1 TB</span>
      <Meter min={0} max={1024} value={512} aria-valuetext="512 GB of 1 TB" aria-labelledby="disk-label" />
    </div>
  )
}

tones

tones.tsx

import { Meter } from 'topclassui/meter'

export default function Demo() {
  return (
    <div className="grid max-w-sm gap-4">
      <Meter tone="primary" value={60} aria-label="Primary" />
      <Meter tone="neutral" value={60} aria-label="Neutral" />
      <Meter tone="success" value={60} aria-label="Success" />
      <Meter tone="warning" value={60} aria-label="Warning" />
      <Meter tone="danger" value={60} aria-label="Danger" />
      <Meter tone="info" value={60} aria-label="Info" />
    </div>
  )
}

sizes

sizes.tsx

import { Meter } from 'topclassui/meter'

/** The track height follows padding-y: 2, 4, 6, 8 and 10 px at density 1. */
export default function Demo() {
  return (
    <div className="grid max-w-sm gap-4">
      <Meter size="xs" value={60} aria-label="Extra small" />
      <Meter size="sm" value={60} aria-label="Small" />
      <Meter size="md" value={60} aria-label="Medium" />
      <Meter size="lg" value={60} aria-label="Large" />
      <Meter size="xl" value={60} aria-label="Extra large" />
    </div>
  )
}

custom-size

custom-size.tsx

import { Meter } from 'topclassui/meter'

/** custom emits no height, so the caller's own class sets it. */
export default function Demo() {
  return (
    <div className="grid max-w-sm gap-4">
      <Meter value={40} aria-label="On the scale" />
      <Meter size="custom" value={40} className="h-3" aria-label="Your own height" />
    </div>
  )
}

In Arabic, right to left

القرص: ٥١٢ غيغابايت من ١ تيرابايت

rtl.tsx

import { Meter } from 'topclassui/meter'

/** The bar grows from the right, the inline start, with no class of its own for it. */
export default function Demo() {
  return (
    <div dir="rtl" lang="ar" className="grid max-w-sm gap-4">
      <div className="grid gap-1">
        <span id="disk-ar" className="text-sm">القرص: ٥١٢ غيغابايت من ١ تيرابايت</span>
        <Meter min={0} max={1024} value={512} aria-valuetext="٥١٢ غيغابايت من ١ تيرابايت" aria-labelledby="disk-ar" />
      </div>
      <Meter value={30} tone="success" aria-label="البطارية" />
    </div>
  )
}

Props

The props of Meter
Prop	Type	Default	Limits	Description
`aria-label`	`string`	-	-	The name read out when no visible text names the meter.
`aria-labelledby`	`string`	-	-	The id of the visible text that names the meter.
`max`	`number`, min -1000000000000000, max 1000000000000000	`100`	min -1000000000000000, max 1000000000000000	The high end of the range, where the track is full; raised to min when below it.
`min`	`number`, min -1000000000000000, max 1000000000000000	`0`	min -1000000000000000, max 1000000000000000	The low end of the range, where the track is empty.
`size`	`xs` \| `sm` \| `md` \| `lg` \| `xl` \| `custom`	`"md"`	-	The shared size scale, which sets the track height; custom emits none.
`tone`	`primary` \| `neutral` \| `success` \| `warning` \| `danger` \| `info`	`"primary"`	-	The colour of the bar; the track stays neutral in every tone.
`value`	`number`, min -1000000000000000, max 1000000000000000	`0`	min -1000000000000000, max 1000000000000000	The reading, clamped between min and max before it reaches ARIA or the bar.

Keyboard and accessibility

Nothing to operate: it is not interactive on its own.

It writes role="meter" with the clamped minimum, maximum and value.
The bar takes the tone's text colour, and a line-strong outline marks the end of the range. Under forced colours the track is Canvas and the bar CanvasText.

Right to left

The bar grows from the inline start: from the right in Arabic, with no class of its own for it.

Server and client

Renders on the server and ships no JavaScript.

Files: index.tsx.

On the chip: server - 0 KB.