Meter

A measurement within a known range (role=meter).

Storage72%

import { BuiMeter } from 'ng-blatui';

<bui-meter [value]="72" label="Storage" />

No label

<bui-meter [value]="58" [showValue]="false" ariaLabel="Battery level" />

Tones

Disk usage32%

Memory78%

Quota94%

<!-- tone="good | warning | danger" -->
<bui-meter [value]="32" label="Disk usage" tone="good" />
<bui-meter [value]="78" label="Memory" tone="warning" />
<bui-meter [value]="94" label="Quota" tone="danger" />

Thresholds

CPU42%

Memory73%

Disk91%

<!-- auto-colour by value: highest threshold whose 'at' <= value wins -->
<bui-meter [value]="91" label="Disk" [thresholds]="thresholds" />
// thresholds = [{ at: 0, tone: 'good' }, { at: 60, tone: 'warning' }, { at: 85, tone: 'danger' }]

API reference

Inputs

Prop	Type	Default	Description
`value`	`number`	`0`	Current measurement; clamped between `min` and `max`.
`min`	`number`	`0`	Minimum value of the meter range.
`max`	`number`	`100`	Maximum value of the meter range.
`label`	`string \| null`	`null`	Optional text label shown above the meter bar.
`tone`	`"danger" \| "default" \| "good" \| "warning"`	`'default'`	Fill colour tone; overridden by any matching threshold.
`thresholds`	`readonly { at: number; tone: keyof typeof TONES; }[]`	`[]`	Auto-pick the fill tone by value: the highest threshold whose `at` ≤ value wins.
`showValue`	`boolean`	`true`	Whether to display the formatted value text next to the label.
`unit`	`string`	`'%'`	Unit suffix appended to the displayed value (e.g. "%").

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.