Status
Status colors combine with text or iconography to convey the status of a task.
Dot Status
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>
<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>
Badge Status
Badges with predefined status colors for different states. Ideal for showing job status, task progress, or system states.
<div nve-layout="row gap:xs align:wrap">
<nve-badge status="scheduled">scheduled</nve-badge>
<nve-badge status="queued">queued</nve-badge>
<nve-badge status="pending">pending</nve-badge>
<nve-badge status="starting">starting</nve-badge>
<nve-badge status="running">running</nve-badge>
<nve-badge status="restarting">restarting</nve-badge>
<nve-badge status="stopping">stopping</nve-badge>
<nve-badge status="finished">finished</nve-badge>
<nve-badge status="failed">failed</nve-badge>
<nve-badge status="unknown">unknown</nve-badge>
<nve-badge status="ignored">ignored</nve-badge>
</div>
<div nve-layout="row gap:xs align:wrap">
<nve-badge status="scheduled">scheduled</nve-badge>
<nve-badge status="queued">queued</nve-badge>
<nve-badge status="pending">pending</nve-badge>
<nve-badge status="starting">starting</nve-badge>
<nve-badge status="running">running</nve-badge>
<nve-badge status="restarting">restarting</nve-badge>
<nve-badge status="stopping">stopping</nve-badge>
<nve-badge status="finished">finished</nve-badge>
<nve-badge status="failed">failed</nve-badge>
<nve-badge status="unknown">unknown</nve-badge>
<nve-badge status="ignored">ignored</nve-badge>
</div>
scheduled queued pending starting running restarting stopping finished failed unknown ignored
Status Tokens
| Token | Value | Description | Demo | |
| --nve-sys-status-scheduled-color | --nve-ref-color-purple-violet-1100 | Use for scheduled task status indicators | |
| --nve-sys-status-queued-color | --nve-ref-color-blue-indigo-1100 | Use for queued task status indicators | |
| --nve-sys-status-starting-color | --nve-ref-color-green-mint-1100 | Use for starting task status indicators | |
| --nve-sys-status-running-color | --nve-ref-color-blue-cobalt-1100 | Use for running task status indicators | |
| --nve-sys-status-restarting-color | --nve-ref-color-yellow-amber-1100 | Use for restarting task status indicators | |
| --nve-sys-status-stopping-color | --nve-ref-color-pink-rose-1100 | Use for stopping task status indicators | |
| --nve-sys-status-finished-color | --nve-ref-color-green-grass-1100 | Use for finished task status indicators | |
| --nve-sys-status-failed-color | --nve-ref-color-red-cardinal-1100 | Use for failed task status indicators | |
| --nve-sys-status-color | --nve-ref-color-neutral-1000 | Use for default task status indicators | |
| --nve-sys-status-pending-color | --nve-ref-color-neutral-1100 | Use for pending task status indicators | |
| --nve-sys-status-unknown-color | --nve-sys-text-black-color | Use for unknown task status indicators | |
| --nve-sys-status-ignored-color | --nve-ref-color-neutral-1100 | Use for ignored task status indicators | |