Progress ring | Arcadia Design

Describe a change, @ to add files

import { useState } from "react";
import { Button, ProgressRing } from "@arcadia/ui";

function Meter() {
  const [used, setUsed] = useState(0.42);
  return (
    <>
      <Button
        size="sm"
        onClick={() => setUsed((u) => (u >= 0.9 ? 0.18 : Math.min(0.96, u + 0.22)))}
      >
        Use more
      </Button>
      <span {...sx("cmp-result", cmp.result)}>{Math.round(used * 100)}%</span>
      <ProgressRing
        value={used}
        label="Context used"
        valueText={`${Math.round(used * 200)}k of 200k tokens`}
      />
    </>
  )

The context meter in a composer's footer. Use more steps it through its levels: yellow from 60%, red from 85%.

TSX

import { ProgressRing } from "@arcadia/ui";

<ProgressRing value={0.61} label="Context used" valueText="122k of 200k tokens" />

A determinate 14px ring, stroke 2, filling clockwise from 12 o'clock. The level follows the value, yellow from warmAt (0.6) and red from hotAt (0.85), unless you pass level. The value change animates, so a jump reads as growth rather than a swap.

Examples

Levels

Three levels, set by the value. Change the thresholds per meter with warmAt and hotAt.

Under 60%: neutral

From 60%: yellow

From 85%: red

Glyph

The raw ring for custom compositions; the component owns size, colour and the value transition.

import { ProgressRingGlyph } from "@arcadia/ui";

<ProgressRingGlyph style={{ width: "var(--space-8)", stroke: "var(--icon-2)" }} />

Size and value

0%6%35%61%86%100%Small

Medium

Large

Text

rootStyle takes layout and these knobs. level sets the arc's colour; set --progress-ring-color only for a meter whose levels mean something else.

--progress-ring-size: Ref<IconSize>Default var(--icon-sm); Width and height.
--progress-ring-color: PaintDefault var(--icon-2); The value arc (yellow when warm, red when hot).
--progress-ring-track: PaintDefault var(--icon-4); The full circle under the arc.

With a label the ring is a meter with its value, range and valueText (default: the rounded percentage), so "Context used, 122k of 200k tokens" is read instead of a bare number. Without a label it is decorative, for use inside a labelled button. The levels are colour only, so say "almost full" in the valueText or a tooltip when it matters.

ProgressRing

valuerequired: number; Fraction filled, 0..1 (clamped).
size: "sm" | "md" | "lg" | "text"Default "md"; 12 / 14 / 16 px, or text beside a label (Icon's text frame). The context meter.
level: "normal" | "warm" | "hot"; Colour level. Default: derived from value with warmAt / hotAt.
warmAt: numberDefault 0.6; Yellow from here.
hotAt: numberDefault 0.85; Red from here.
label: string; Accessible name ("Context used"). With a label the ring is a meter (value, min, max and valueText); without one it is decorative, for use inside a labelled button.
valueText: string; Spoken value, e.g. "61k of 1,008k tokens". Default: the rounded percentage.
mark: number; A tick at this fraction, 0..1.
rootStyle: RootStyle<ProgressRingKnobs>; Typed StyleX override: layout and the --progress-ring-* knobs.

Rest props go to <span> props and render.

Usage

Examples

Levels

Glyph

Matrix

Customising

Accessibility

API reference

ProgressRing