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.

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.

Takes	Default	Sets
`Ref<IconSize>`	`var(--icon-base)`	Width and height.
`Paint`	`var(--icon-2)`	The value arc (yellow when warm, red when hot).
`Paint`	`var(--icon-4)`	The full circle under the arc.

Usage

Examples

Levels

Glyph

Matrix

Customising

Accessibility

API reference

ProgressRing