Metrics & Status

UsageBar

Inline table-cell usage bar for CPU, memory, or disk columns; compact enough to sit in a data grid cell.

Props

UsageBar extends HTMLAttributes<HTMLSpanElement>.

UsageBarProps props

Prop	Type	Default	Description
`value`	`number`	—	Fill percentage, 0–100.
`tone`	`"default" \| "ok" \| "warn" \| "high"`	`"default"`	Status color: ok is green, warn is yellow, high is red, and default is neutral.

Default — OK (green) — Warn (yellow) — High (red) —

UsageBar tones

ImportTSX

import { UsageBar } from "@solarius/onset";
import type { UsageBarProps } from "@solarius/onset";