Components / Display & Media / Gauge
Gauge beta
One number against its limit, as an arc — health you can read from across the room.
<figure class="k-gauge" role="img" aria-label="Deploy success rate is 72 percent over the last 30 days" style="max-width:430px">
<figcaption>Deploy success</figcaption>
<div class="k-gauge-wrap">
<svg width="210" height="122" viewBox="0 0 200 118" aria-hidden="true">
<path d="M20,104 A80,80 0 0 1 180,104" fill="none" style="stroke:var(--k-zinc-200)" stroke-width="15" stroke-linecap="round"/>
<path d="M20,104 A80,80 0 0 1 180,104" fill="none" style="stroke:var(--k-accent)" stroke-width="15" stroke-linecap="round" stroke-dasharray="181 251"/>
</svg>
<div class="k-gauge-c"><b>72%</b><span>last 30 days</span></div>
</div>
</figure>.k-gauge{font-family:var(--k-font);text-align:left;margin:0}
.k-gauge figcaption{font-size:13px;font-weight:600;color:var(--k-ink);margin-bottom:6px}
.k-gauge-wrap{position:relative;width:210px}
.k-gauge-c{position:absolute;left:0;right:0;bottom:2px;text-align:center}
.k-gauge-c b{font-size:27px;font-weight:650;letter-spacing:-.02em;color:var(--k-ink)}
.k-gauge-c span{display:block;font-size:11.5px;color:var(--k-ink-3);margin-top:1px}
Usage
For a single health metric with a known ceiling: uptime, budget burn, quota. If there is no meaningful limit, a Stat is the honest part instead.
Accessibility
A chart is a picture of numbers: give the figure role="img" and an aria-label that states the conclusion ("Signups rose from 22 to 71 over the year"), and keep the data available as a table nearby.
Related parts
Aspect Ratio beta
A box that holds its shape — 16/9 for video, 4/3 for photos, 1/1 for avatars — whatever fills it.
Avatar beta
Initials first, photo when there is one. Three sizes, a status dot, and a stacking group.
Bar Chart beta
Columns for comparing a handful of values — the chart people read correctly at a glance.
Card beta
The universal container: a hairline box with a header, a body and a footer that agree with each other.