Components

Meter

Shows one value in a known range as a bar: storage used, a quota, a score.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook for the controls.

Live example, StorybookOpen in Storybook

Default

A Meter has a label, a value and a bar. When value is between 0 and 100 the value shows as a percent. description puts helper text under the bar and links it to the meter for screen readers.

Storage

Last updated today.

import { Meter } from '@bigbang/ui';

export default function Default() {
  return <Meter label="Storage" value={64} description="Last updated today." className="w-full max-w-96" />;
}

Sizes

The bar is 8 px high at md and 4 px at sm. Use sm in dense rows and tables.

Storage (Small)

Storage (Medium)

import { Meter } from '@bigbang/ui';

export default function Sizes() {
  return (
    <div className="flex w-full max-w-96 flex-col gap-xl">
      <Meter label="Storage (Small)" value={64} size="sm" />
      <Meter label="Storage (Medium)" value={64} size="md" />
    </div>
  );
}

Tone and thresholds

With tone="auto", low, high and optimum follow the HTML <meter> regions. Here the best value for usage is 0 (optimum={0}): the low region is good, the middle is a warning and the high region is danger. Colour only supports the reading; screen readers also read “optimal”, “medium” or “high” after the value. Without thresholds the colour is brand. For a fixed colour pass brand, neutral, success, warning or danger.

Quota used

import { Meter } from '@bigbang/ui';

export default function Tones() {
  return (
    <div className="flex w-full max-w-96 flex-col gap-xl">
      <Meter label="Quota used" value={30} low={50} high={80} optimum={0} />
      <Meter label="Quota used" value={65} low={50} high={80} optimum={0} />
      <Meter label="Quota used" value={92} low={50} high={80} optimum={0} />
    </div>
  );
}

Format

The default format is the percent of the range. Pass Intl.NumberFormat options with format: a unit (gigabyte), a decimal or a plain number. The language follows the Provider.

Storage (Percent)

Storage (Unit (GB))

Score (Plain number)

import { Meter } from '@bigbang/ui';

export default function Formats() {
  return (
    <div className="flex w-full max-w-96 flex-col gap-xl">
      <Meter label="Storage (Percent)" value={64} />
      <Meter label="Storage (Unit (GB))" value={32} max={50} format={{ style: 'unit', unit: 'gigabyte' }} />
      <Meter label="Score (Plain number)" value={7.5} max={10} format={{ maximumFractionDigits: 1 }} />
    </div>
  );
}

Light and dark mode

Meter takes the fill from status tokens and the track from a surface token.

Quota used

import { Meter } from '@bigbang/ui';

export default function Tones() {
  return (
    <div className="flex w-full max-w-96 flex-col gap-xl">
      <Meter label="Quota used" value={30} low={50} high={80} optimum={0} />
      <Meter label="Quota used" value={65} low={50} high={80} optimum={0} />
      <Meter label="Quota used" value={92} low={50} high={80} optimum={0} />
    </div>
  );
}