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>