Use a gauge to show system resource usage.
<nve-gauge status="accent" value="66">66%</nve-gauge>
<nve-gauge status="accent" value="66">66%</nve-gauge>
66%
Installation
<script type="module">
import '@nvidia-elements/core/gauge/define.js';
</script>
<nve-gauge status="accent" value="66">66%</nve-gauge>
<script type="module">
import '@nvidia-elements/core/gauge/define.js';
</script>
<nve-gauge status="accent" value="66">66%</nve-gauge>
nve api.get nve-gauge
nve api.get nve-gauge
Indicating Status
Four visual treatments represent the status of tasks.
Status Description accent Highlights important actions or draws attention to primary interactive elements. warning Indicates cautionary actions that require careful consideration before proceeding. success Represents positive outcomes, confirmations, or constructive actions. danger Signals destructive or irreversible actions that need extra attention and confirmation. neutral Gauges with accent, success, warning, and danger colors for autonomous system health and readiness signals.
<div nve-layout="row gap:sm">
<nve-gauge value="50">50%</nve-gauge>
<nve-gauge status="accent" value="75">75%</nve-gauge>
<nve-gauge status="success" value="75">75%</nve-gauge>
<nve-gauge status="warning" value="75" aria-valuetext="2.1m">2.1m</nve-gauge>
<nve-gauge status="danger" value="75" aria-valuetext="0Hz">0Hz</nve-gauge>
</div>
<div nve-layout="row gap:sm">
<nve-gauge value="50">50%</nve-gauge>
<nve-gauge status="accent" value="75">75%</nve-gauge>
<nve-gauge status="success" value="75">75%</nve-gauge>
<nve-gauge status="warning" value="75" aria-valuetext="2.1m">2.1m</nve-gauge>
<nve-gauge status="danger" value="75" aria-valuetext="0Hz">0Hz</nve-gauge>
</div>
Shape
Determines the gauge shape. Set half for a compact semi-circular arc.
Shape Description half Shape variants compare the default 270-degree gauge with the compact half gauge for telemetry layouts with tighter vertical space.
<div nve-layout="row gap:sm align:vertical-center">
<nve-gauge status="accent" value="66">66%</nve-gauge>
<nve-gauge shape="half" status="accent" value="66">66%</nve-gauge>
</div>
<div nve-layout="row gap:sm align:vertical-center">
<nve-gauge status="accent" value="66">66%</nve-gauge>
<nve-gauge shape="half" status="accent" value="66">66%</nve-gauge>
</div>
Thumb
Controls the value indicator. Set dot for only the end dot or needle for a pointer.
Thumb Description fill dot needle Thumb variants compare filled, dot, and needle indicators for dashboards that need different levels of visual emphasis.
<div nve-layout="row gap:sm">
<nve-gauge thumb="fill" value="66">fill</nve-gauge>
<nve-gauge thumb="dot" value="66">dot</nve-gauge>
<nve-gauge thumb="needle" value="66">needle</nve-gauge>
</div>
<div nve-layout="row gap:sm">
<nve-gauge thumb="fill" value="66">fill</nve-gauge>
<nve-gauge thumb="dot" value="66">dot</nve-gauge>
<nve-gauge thumb="needle" value="66">needle</nve-gauge>
</div>
Size
Controls the visual scale of an element to match its importance and available space.
Size Description sm Compact size for dense layouts or secondary elements with less visual prominence. md Standard size that works well in most contexts and provides balanced visibility. lg Larger size for emphasizing important elements or improving touch targets in spacious layouts. Gauges in small, medium, and large sizes for dense robotics and autonomous vehicle dashboards.
<div nve-layout="row gap:sm">
<nve-gauge size="sm" value="50" aria-valuetext="30Hz">
<span nve-text="grow">30Hz</span>
</nve-gauge>
<nve-gauge size="md" value="50" aria-valuetext="12Hz">
<span nve-text="grow">12Hz</span>
</nve-gauge>
<nve-gauge size="lg" value="50" aria-valuetext="84%">
<span nve-text="grow">84%</span>
</nve-gauge>
</div>
<div nve-layout="row gap:sm">
<nve-gauge size="sm" value="50" aria-valuetext="30Hz">
<span nve-text="grow">30Hz</span>
</nve-gauge>
<nve-gauge size="md" value="50" aria-valuetext="12Hz">
<span nve-text="grow">12Hz</span>
</nve-gauge>
<nve-gauge size="lg" value="50" aria-valuetext="84%">
<span nve-text="grow">84%</span>
</nve-gauge>
</div>
Value
The current value of the gauge.
Value Description number Gauges with values from 0% to 100% for displaying system resource usage.
<div nve-layout="row gap:sm">
<nve-gauge value="0">0%</nve-gauge>
<nve-gauge value="33">33%</nve-gauge>
<nve-gauge value="66">66%</nve-gauge>
<nve-gauge value="100">100%</nve-gauge>
</div>
<div nve-layout="row gap:sm">
<nve-gauge value="0">0%</nve-gauge>
<nve-gauge value="33">33%</nve-gauge>
<nve-gauge value="66">66%</nve-gauge>
<nve-gauge value="100">100%</nve-gauge>
</div>
Gradient
Use gradient colors for gauges with scaled non-segmented values such as temperature and bandwidth.
<style>
nve-gauge#gauge-temperature-example {
--background: conic-gradient(
from 225deg at 50% 50%,
var(--nve-sys-support-success-emphasis-color) 0deg 18deg,
var(--nve-sys-support-warning-emphasis-color) 135deg,
var(--nve-sys-support-danger-emphasis-color) 252deg 300deg,
var(--nve-sys-support-success-emphasis-color) 300deg 360deg
);
}
nve-gauge#gauge-mbps-example {
--background: conic-gradient(
from 225deg at 50% 50%,
var(--nve-sys-support-danger-emphasis-color) 0deg 18deg,
var(--nve-sys-support-warning-emphasis-color) 135deg,
var(--nve-sys-support-success-emphasis-color) 252deg 300deg,
var(--nve-sys-support-danger-emphasis-color) 300deg 360deg
);
}
</style>
<div nve-layout="row gap:md">
<nve-gauge thumb="dot" value="82" id="gauge-temperature-example" aria-label="Temperature" aria-valuetext="82°C">
<span>82°C</span>
<span nve-text="body sm muted">TEMP</span>
</nve-gauge>
<nve-gauge thumb="needle" value="98" id="gauge-mbps-example" aria-label="Download" aria-valuetext="980Mbps">
<span nve-text="body sm">980Mbps</span>
<span nve-text="body sm muted">Download</span>
</nve-gauge>
</div>
<style>
nve-gauge#gauge-temperature-example {
--background: conic-gradient(
from 225deg at 50% 50%,
var(--nve-sys-support-success-emphasis-color) 0deg 18deg,
var(--nve-sys-support-warning-emphasis-color) 135deg,
var(--nve-sys-support-danger-emphasis-color) 252deg 300deg,
var(--nve-sys-support-success-emphasis-color) 300deg 360deg
);
}
nve-gauge#gauge-mbps-example {
--background: conic-gradient(
from 225deg at 50% 50%,
var(--nve-sys-support-danger-emphasis-color) 0deg 18deg,
var(--nve-sys-support-warning-emphasis-color) 135deg,
var(--nve-sys-support-success-emphasis-color) 252deg 300deg,
var(--nve-sys-support-danger-emphasis-color) 300deg 360deg
);
}
</style>
<div nve-layout="row gap:md">
<nve-gauge thumb="dot" value="82" id="gauge-temperature-example" aria-label="Temperature" aria-valuetext="82°C">
<span>82°C</span>
<span nve-text="body sm muted">TEMP</span>
</nve-gauge>
<nve-gauge thumb="needle" value="98" id="gauge-mbps-example" aria-label="Download" aria-valuetext="980Mbps">
<span nve-text="body sm">980Mbps</span>
<span nve-text="body sm muted">Download</span>
</nve-gauge>
</div>
82°C TEMP 980Mbps Download
Dynamic
Use for displaying real-time system usage and performance metrics.
<div nve-layout="row gap:sm">
<nve-gauge id="dynamic-gpu-gauge" status="success" value="0" aria-label="GPU" aria-valuetext="0%">
<span nve-text="grow">0%</span>
<span nve-text="body sm muted">GPU</span>
</nve-gauge>
</div>
<script type="module">
const gauge = document.querySelector("#dynamic-gpu-gauge");
const valueElement = gauge.querySelector("span");
setInterval(() => {
const value = Math.floor(Math.random() * 101);
const text = value + "%";
gauge.value = value;
gauge.status = value >= 80 ? "danger" : value >= 60 ? "warning" : "success";
gauge.setAttribute("aria-valuetext", text);
valueElement.textContent = text;
}, 1500);
</script>
<div nve-layout="row gap:sm">
<nve-gauge id="dynamic-gpu-gauge" status="success" value="0" aria-label="GPU" aria-valuetext="0%">
<span nve-text="grow">0%</span>
<span nve-text="body sm muted">GPU</span>
</nve-gauge>
</div>
<script type="module">
const gauge = document.querySelector("#dynamic-gpu-gauge");
const valueElement = gauge.querySelector("span");
setInterval(() => {
const value = Math.floor(Math.random() * 101);
const text = value + "%";
gauge.value = value;
gauge.status = value >= 80 ? "danger" : value >= 60 ? "warning" : "success";
gauge.setAttribute("aria-valuetext", text);
valueElement.textContent = text;
}, 1500);
</script>
Multi Gauge
Autonomous vehicle taxi gauges combine battery, perception, compute, and link status with realistic drift. Use for live dispatch views that need changing system health.
<div nve-layout="row gap:sm">
<nve-gauge id="av-taxi-battery-gauge" status="success" value="74" aria-label="Battery" aria-valuetext="74%">
<span nve-text="grow">74%</span>
<span nve-text="body sm muted">BATTERY</span>
</nve-gauge>
<nve-gauge id="av-taxi-perception-gauge" status="success" value="96" aria-label="Perception" aria-valuetext="96%">
<span nve-text="grow">96%</span>
<span nve-text="body sm muted">PERCEPTION</span>
</nve-gauge>
<nve-gauge id="av-taxi-compute-gauge" status="success" value="62" aria-label="GPU" aria-valuetext="62%">
<span nve-text="grow">62%</span>
<span nve-text="body sm muted">GPU</span>
</nve-gauge>
</div>
<script type="module">
const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
const telemetry = {
battery: 74,
compute: 62,
perception: 96,
};
const gauges = {
battery: document.querySelector("#av-taxi-battery-gauge"),
compute: document.querySelector("#av-taxi-compute-gauge"),
perception: document.querySelector("#av-taxi-perception-gauge"),
};
const setGauge = (gauge, value, text, status) => {
gauge.value = Math.round(value);
gauge.status = status;
gauge.setAttribute("aria-valuetext", text);
gauge.querySelector("span").textContent = text;
};
setInterval(() => {
telemetry.battery = clamp(telemetry.battery - 0.08 + (Math.random() - 0.4) * 0.3, 46, 82);
telemetry.compute = clamp(telemetry.compute + (Math.random() - 0.48) * 7, 34, 91);
telemetry.perception = clamp(telemetry.perception + (Math.random() - 0.52) * 2.4, 88, 99);
const battery = Math.round(telemetry.battery);
const compute = Math.round(telemetry.compute);
const perception = Math.round(telemetry.perception);
setGauge(gauges.battery, battery, battery + "%", battery < 30 ? "danger" : battery < 50 ? "warning" : "success");
setGauge(gauges.compute, compute, compute + "%", compute >= 85 ? "danger" : compute >= 70 ? "warning" : "success");
setGauge(
gauges.perception,
perception,
perception + "%",
perception < 90 ? "danger" : perception < 94 ? "warning" : "success",
);
}, 1600);
</script>
<div nve-layout="row gap:sm">
<nve-gauge id="av-taxi-battery-gauge" status="success" value="74" aria-label="Battery" aria-valuetext="74%">
<span nve-text="grow">74%</span>
<span nve-text="body sm muted">BATTERY</span>
</nve-gauge>
<nve-gauge id="av-taxi-perception-gauge" status="success" value="96" aria-label="Perception" aria-valuetext="96%">
<span nve-text="grow">96%</span>
<span nve-text="body sm muted">PERCEPTION</span>
</nve-gauge>
<nve-gauge id="av-taxi-compute-gauge" status="success" value="62" aria-label="GPU" aria-valuetext="62%">
<span nve-text="grow">62%</span>
<span nve-text="body sm muted">GPU</span>
</nve-gauge>
</div>
<script type="module">
const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
const telemetry = {
battery: 74,
compute: 62,
perception: 96,
};
const gauges = {
battery: document.querySelector("#av-taxi-battery-gauge"),
compute: document.querySelector("#av-taxi-compute-gauge"),
perception: document.querySelector("#av-taxi-perception-gauge"),
};
const setGauge = (gauge, value, text, status) => {
gauge.value = Math.round(value);
gauge.status = status;
gauge.setAttribute("aria-valuetext", text);
gauge.querySelector("span").textContent = text;
};
setInterval(() => {
telemetry.battery = clamp(telemetry.battery - 0.08 + (Math.random() - 0.4) * 0.3, 46, 82);
telemetry.compute = clamp(telemetry.compute + (Math.random() - 0.48) * 7, 34, 91);
telemetry.perception = clamp(telemetry.perception + (Math.random() - 0.52) * 2.4, 88, 99);
const battery = Math.round(telemetry.battery);
const compute = Math.round(telemetry.compute);
const perception = Math.round(telemetry.perception);
setGauge(gauges.battery, battery, battery + "%", battery < 30 ? "danger" : battery < 50 ? "warning" : "success");
setGauge(gauges.compute, compute, compute + "%", compute >= 85 ? "danger" : compute >= 70 ? "warning" : "success");
setGauge(
gauges.perception,
perception,
perception + "%",
perception < 90 ? "danger" : perception < 94 ? "warning" : "success",
);
}, 1600);
</script>
74% BATTERY 96% PERCEPTION 62% GPU
Half Shape
Determines the gauge shape. Set half for a compact semi-circular arc.
Shape Description half Half shape variant for telemetry layouts with tighter vertical space.
<div nve-layout="row gap:sm align:vertical-center">
<nve-gauge shape="half" value="66" size="sm">66%</nve-gauge>
<nve-gauge shape="half" value="66">66%</nve-gauge>
<nve-gauge shape="half" value="66" size="lg">66%</nve-gauge>
</div>
<div nve-layout="row gap:sm align:vertical-center">
<nve-gauge shape="half" value="66" size="sm">66%</nve-gauge>
<nve-gauge shape="half" value="66">66%</nve-gauge>
<nve-gauge shape="half" value="66" size="lg">66%</nve-gauge>
</div>
Half Shape Needle
Determines the gauge shape. Set half for a compact semi-circular arc.
Shape Description half Half shape with needle thumb variant for rapidly changing values in confined spaces.
<div nve-layout="row gap:sm align:vertical-center">
<nve-gauge shape="half" thumb="needle" value="66" size="sm">66%</nve-gauge>
<nve-gauge shape="half" thumb="needle" value="66">66%</nve-gauge>
<nve-gauge shape="half" thumb="needle" value="66" size="lg">66%</nve-gauge>
</div>
<div nve-layout="row gap:sm align:vertical-center">
<nve-gauge shape="half" thumb="needle" value="66" size="sm">66%</nve-gauge>
<nve-gauge shape="half" thumb="needle" value="66">66%</nve-gauge>
<nve-gauge shape="half" thumb="needle" value="66" size="lg">66%</nve-gauge>
</div>
Max Value
The max value of the gauge that the value is proportionally scaled to.
Max Description number Gauges with custom max values for mission checkpoints, validation clips, and map tile processing.
<div nve-layout="row gap:sm">
<nve-gauge status="accent" max="20" value="5">5/20</nve-gauge>
<nve-gauge max="20" value="10">10/20</nve-gauge>
<nve-gauge max="20" value="15">15/20</nve-gauge>
</div>
<div nve-layout="row gap:sm">
<nve-gauge status="accent" max="20" value="5">5/20</nve-gauge>
<nve-gauge max="20" value="10">10/20</nve-gauge>
<nve-gauge max="20" value="15">15/20</nve-gauge>
</div>
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release Docs Preview API Documentation Fully Themeable
beta Robust unit test coverages Passed API Review Passed Designer VQA Review Included in library package stable No known outstanding AA WCAG issues No known outstanding performance issues Adapts to different screen/container sizes No breaking API changes for at least 90 days