UsageGauge
A UsageGauge component from the Sigil design system.
import { UsageGauge } from "@sigil-ui/components";
<UsageGauge>...</UsageGauge>
| 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. |
| 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 |