meter

A level such as quota used, with optional warning and danger points.

Example

Import64%
Run breakdown
Quota87 of 100 calls

Laravel

<x-admin::grid min="14rem">
    <x-admin::progress label="Import" value="64" />
    <x-admin::progress label="Run breakdown" id="g-segments" :segments="[['label' => 'Completed', 'value' => 82, 'variant' => 'success'], ['label' => 'Failed', 'value' => 10, 'variant' => 'destructive'], ['label' => 'Running', 'value' => 8, 'variant' => 'info']]" />
    <x-admin::meter label="Quota" value="87" max="100" warning="75" danger="95" display="87 of 100 calls" />
</x-admin::grid>

Props

PropRequiredDefaultOptions
value0
max100
labelnull
displaynull
warningnull
dangernull

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Meter } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<div style="--_min:14rem;--_gap:var(--ad-space-4);gap:var(--_gap)" class="adm-grid"><div class="adm-meter">
        <div class="adm-meter__head"><span>Import</span><span class="adm-meter__value">64%</span></div>        <div class="adm-progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"  aria-label="Import" ><span style="width:64%"></span></div>
    </div>
    <div class="adm-meter" id="g-segments">
        <div class="adm-meter__head"><span>Run breakdown</span></div>        <div class="adm-progress adm-progress--stacked" role="img" aria-label="Run breakdown: Completed 82, Failed 10, Running 8">
            <span class="adm-progress__bar--success" style="width:82%"></span><span class="adm-progress__bar--destructive" style="width:10%"></span><span class="adm-progress__bar--info" style="width:8%"></span>        </div>
        <ul class="adm-legend" aria-hidden="true">
            <li><span class="adm-legend__swatch adm-progress__bar--success"></span>Completed <span class="adm-meter__value">82</span></li><li><span class="adm-legend__swatch adm-progress__bar--destructive"></span>Failed <span class="adm-meter__value">10</span></li><li><span class="adm-legend__swatch adm-progress__bar--info"></span>Running <span class="adm-meter__value">8</span></li>        </ul>
    </div>
    <div class="adm-meter">
    <div class="adm-meter__head"><span>Quota</span><span class="adm-meter__value">87 of 100 calls</span></div>    <div class="adm-progress" role="meter" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100"  aria-label="Quota" ><span class="adm-progress__bar--warning" style="width:87%"></span></div>
</div></div>