Skip to main content

Gauge

Gauge — Prism component.

Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggle
Live demo
Open ↗

When to use

Gauge — Prism component.

Accessibility

Each chart ships an accessible fallback (a visually-hidden data table / aria-label summary) so the data is available to screen readers, not just sighted users. Colour is paired with shape/label, never used alone.

Import

const { Gauge } = window.PrismDesignSystem_39d121;

Props

PropTypeRequiredDescription
valuenumberYes
minnumber
maxnumber
labelReact.ReactNode
unitstring
sizenumber
thicknessnumber
segmentsGaugeSegment[]
colorstring
formatValue(v: number) => React.ReactNode