RadialGauge

API reference and demos for RadialGauge.

Source

Import

import { RadialGauge } from "@flanksource/clicky-ui/data";

Demos

Default · Open in Storybook

With Center Icon · Open in Storybook

Tone Set · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
center	ReactNode	—	Content rendered centered inside the ring (icon, number, …).
className	string	—	Classes applied to the root flex row.
label	ReactNode	—	Text rendered to the right of the ring.
max	number	100	Value that fills the ring completely.
size	number	28	Outer diameter in pixels.
thickness	number	3	Ring thickness in pixels.
title	string	—	Native tooltip / accessible title.
tone	enum	neutral	Arc color. Defaults to neutral.
value*	number	—	Current value. Clamped to [0, max].