Components

Meter

A labelled measurement bar for a value within a range (usage, score, capacity), with status tones.

php artisan blatui:add meter

Storage 72%

<div class="w-full max-w-sm">
    <x-ui.meter :value="72" label="Storage" />
</div>

No Label

{{-- No header row: pass an aria-label for the accessible name. --}}
<div class="w-full max-w-sm">
    <x-ui.meter :value="58" :show-value="false" aria-label="Battery level" />
</div>

Thresholds

CPU load 35%

CPU load 68%

CPU load 91%

{{-- Let low/high/optimum auto-pick the colour, like the native <meter>. --}}
{{-- Here lower is better (optimum below low), so a high value reads as danger. --}}
<div class="flex w-full max-w-sm flex-col gap-4">
    <x-ui.meter :value="35" :low="50" :high="80" :optimum="20" label="CPU load" />
    <x-ui.meter :value="68" :low="50" :high="80" :optimum="20" label="CPU load" />
    <x-ui.meter :value="91" :low="50" :high="80" :optimum="20" label="CPU load" />
</div>

Tones

Disk usage 32%

Memory 78%

Quota 94%

{{-- Force a status colour with the `tone` prop. --}}
<div class="flex w-full max-w-sm flex-col gap-4">
    <x-ui.meter :value="32" label="Disk usage" tone="good" />
    <x-ui.meter :value="78" label="Memory" tone="warning" />
    <x-ui.meter :value="94" label="Quota" tone="danger" />
</div>

API Reference

Props, slots and exposed methods for <x-ui.meter>.

Props

Prop	Type	Default	Description
`value`*	`number`	`0`	The current measured value. Clamped into the min/max range for display.
`min`	`number`	`0`	The lower bound of the scale.
`max`	`number`	`100`	The upper bound of the scale. Forced above min if an empty or inverted range is passed.
`label`	`string`	—	Visible label and accessible name. When omitted, an aria-label attribute or "Meter" is used instead.
`tone`	`string`	—	Forces the fill color. When set it overrides the low/high/optimum threshold logic. `good` `warning` `danger` `default`
`low`	`number`	—	Lower bound of the preferred middle band. Used with high/optimum to auto-pick the tone like the native <meter>.
`high`	`number`	—	Upper bound of the preferred middle band. Used with low/optimum to auto-pick the tone.
`optimum`	`number`	—	The ideal value. Its position relative to low/high decides which side reads as "good".
`showValue`	`bool`	`true`	Show the formatted value text in the header row.
`unit`	`string`	`'%'`	Suffix appended to the value text, e.g. "%". Use a space-prefixed unit or "" as needed.

* Required.