UI · Application UI
Activity ring
Ring visualisation with two modes: a single-value score gauge (value) or an interactive segmented donut (segments) with hover/pin, tooltip, legend, and draw-in.
@byronwade/foundation@byronwade/status-dot@byronwade/utils
Feature showcase
Installation
Features
5 examples
Default, Tones, With Verdict, Score, Score Tones.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| segments | RingSegment[] | - | Segmented mode: { value, label, tone?, href? } per segment. |
| value | number | - | Score mode: a single value (0–max) rendered as one arc. |
| state | "default" | "loading" | "empty" | "success" | "error" | "default" | Object state shown inside the ring — loading renders a skeleton, error a destructive ring with “N/A”; empty/success/default render the data you pass. No companion text; shift-free across states. |
| max | number | 100 | Score mode denominator for value. |
| tone | StatusTone | - | Score mode: override the threshold-derived tone (scoreTone). |
| label | string | - | Score mode: caption under the number. |
| size | number | 168 / 160 | Diameter in px (segments / score). |
| thickness | number | 12 / 10 | Ring stroke width (segments / score). |
| gap | number | 18 | Segments: visual gap between segments. |
| centerLabel | string | "total" | Segments: caption under the idle centre total. |
| formatValue | (n: number) => string | - | Segments: format the centre + tooltip values. |
| onSegmentClick | (segment, index) => void | - | Segments: make segments actionable (drill-down). |
| verdict | boolean | false | Segments: show a derived headline below the ring. |
| caption | string | - | Segments: optional description line below the ring. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/status-dot | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/activity-ring.tsx |
| Default example | content/examples/activity-ring/default.tsx |
| Tones example | content/examples/activity-ring/tones.tsx |
| With Verdict example | content/examples/activity-ring/with-verdict.tsx |
| Score example | content/examples/activity-ring/score.tsx |
| Score Tones example | content/examples/activity-ring/score-tones.tsx |