Components / Feedback & Status / Meter

Meter beta

A measured level with a tick scale — storage, capacity, load. The scale is part of the component.

Preview

Storage72 / 100 GB

0255075100

Export queue88%

Failed jobs96%

<div style="display:grid;gap:18px;max-width:420px">
  <div style="display:grid;gap:7px">
    <div style="display:flex;justify-content:space-between;font-size:12.5px"><span style="font-weight:550">Storage</span><span style="font-family:var(--k-mono);color:var(--k-ink-2)">72 / 100 GB</span></div>
    <div class="k-meter" role="meter" aria-label="Storage used" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"><div class="k-meter-track"><div class="k-meter-fill" style="width:72%"></div></div><div class="k-meter-scale"><span>0</span><span>25</span><span>50</span><span>75</span><span>100</span></div></div>
  </div>
  <div style="display:grid;gap:7px">
    <div style="display:flex;justify-content:space-between;font-size:12.5px"><span style="font-weight:550">Export queue</span><span style="font-family:var(--k-mono);color:var(--k-ink-2)">88%</span></div>
    <div class="k-meter" data-tone="warning" role="meter" aria-label="Export queue load" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"><div class="k-meter-track"><div class="k-meter-fill" style="width:88%"></div></div></div>
  </div>
  <div style="display:grid;gap:7px">
    <div style="display:flex;justify-content:space-between;font-size:12.5px"><span style="font-weight:550">Failed jobs</span><span style="font-family:var(--k-mono);color:var(--k-ink-2)">96%</span></div>
    <div class="k-meter" data-tone="critical" role="meter" aria-label="Failed job ratio" aria-valuenow="96" aria-valuemin="0" aria-valuemax="100"><div class="k-meter-track"><div class="k-meter-fill" style="width:96%"></div></div></div>
  </div>
</div>

/* KATA Meter */
.k-meter-track{position:relative;height:8px;border-radius:var(--k-radius-full);background:var(--k-seg);overflow:hidden}
.k-meter-fill{height:100%;border-radius:var(--k-radius-full);background:var(--k-ink)}
.k-meter-track::after{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:10% 100%}
.k-meter[data-tone="warning"] .k-meter-fill{background:var(--k-amber)}
.k-meter[data-tone="critical"] .k-meter-fill{background:var(--k-danger)}
.k-meter-scale{display:flex;justify-content:space-between;margin-top:5px;font-family:var(--k-mono);font-size:10.5px;color:var(--k-ink-3)}

Usage

For a value that has a limit and a meaning at a glance. Tones: default ink, warning amber, critical red. If there is no limit, it is not a meter — use Progress for work being done.

Accessibility

role="meter" with aria-valuenow/min/max and a label. The visible number next to it carries the same information as the bar.

Empty state

Progress