A visual indicator that communicates a status or notification of an associated component.
<nve-dot status="starting"></nve-dot>
Installation
<script type="module">
import '@nvidia-elements/core/dot/define.js';
</script>
<nve-dot status="starting"></nve-dot>
Status
Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.
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. scheduled Task has a scheduled future execution at a specific time. queued Task is waiting in line to begin after other tasks complete. pending Task is awaiting approval, user input, or external conditions before proceeding. starting Task is initializing and preparing to begin active execution. running Task is actively executing and making progress. restarting Task restarts after an interruption or reset. stopping Task is gracefully shutting down and completing cleanup operations. finished Task has completed successfully with the expected outcome. failed Task encountered an error and did not complete as intended. unknown Task status remains unknown or unavailable. ignored Task was intentionally skipped or excluded from execution.
Comprehensive process status indicators for system operations, providing clear visual feedback on job states and workflow progress.
<div nve-layout="row gap:md">
<nve-dot status="scheduled"></nve-dot>
<nve-dot status="queued"></nve-dot>
<nve-dot status="pending"></nve-dot>
<nve-dot status="starting"></nve-dot>
<nve-dot status="running"></nve-dot>
<nve-dot status="restarting"></nve-dot>
<nve-dot status="stopping"></nve-dot>
<nve-dot status="finished"></nve-dot>
<nve-dot status="failed"></nve-dot>
<nve-dot status="unknown"></nve-dot>
</div>
Support
Semantic color variations for general status communication, enabling clear visual distinction of different states and priorities.
<div nve-layout="row gap:md">
<nve-dot></nve-dot>
<nve-dot status="accent"></nve-dot>
<nve-dot status="warning"></nve-dot>
<nve-dot status="success"></nve-dot>
<nve-dot status="danger"></nve-dot>
</div>
Number
Dot with numeric content for notification badges and counters, providing clear visual indicators of quantity or alerts.
<div nve-layout="row gap:md">
<nve-dot>10</nve-dot>
<nve-dot status="accent" aria-label="10 notifications">10</nve-dot>
<nve-dot status="warning" aria-label="10 notifications">10</nve-dot>
<nve-dot status="success" aria-label="10 notifications">10</nve-dot>
<nve-dot status="danger" aria-label="10 notifications">10</nve-dot>
</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.
Different dot sizes to accommodate layout contexts from compact indicators to prominent status displays.
<div nve-layout="row gap:sm">
<nve-dot size="sm">10</nve-dot>
<nve-dot>10</nve-dot>
<nve-dot size="lg">10</nve-dot>
</div>
<br />
<div nve-layout="row gap:lg">
<nve-dot size="sm"></nve-dot>
<nve-dot></nve-dot>
<nve-dot size="lg"></nve-dot>
</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