Usage Gauge
Show current usage relative to a limit.
Preview
Import
import { UsageGauge } from "@sigil-ui/components";Usage
<div className="flex w-full flex-wrap items-center justify-center gap-[var(--s-space-24)]">
<UsageGauge value={42} max={100} label="Storage" />
<UsageGauge value={78} max={100} label="CPU" />
<UsageGauge value={95} max={100} label="Memory" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | — |
max | number | — | — |
label | string | — | — |
unit | string | — | — |
width | number | — | — |
height | number | — | — |
color | string | — | Color of the filled arc. Defaults to primary, turns to error/warning at thresholds. |
autoColor | boolean | true | Auto-color based on usage percentage. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Primary |
--s-error | Error |
--s-warning | Warning |
--s-border | Border |
--s-text | Text |
--s-font-mono | Font mono |
--s-text-muted | Text muted |