ProgressCircle

Usage

import { ProgressCircle } from '@acronis-platform/ui-react';

ProgressCircle is a compact circular progress ring — an SVG arc that fills with value and whose color tracks the level (danger → critical → warning → success), with an optional numeric or icon center. It wraps the Base UI Progress primitive for role="progressbar" semantics. The sibling of the linear Progress; use it for at-a-glance scores in table cells, cards, and widgets. Design-pending v1 on the shared status tokens (no dedicated tier).

Examples

<ProgressCircle value={75} size="md" showValue />
<ProgressCircle value={25} size="sm" />            {/* arc auto-colors to danger */}
<ProgressCircle value={100} size="lg" showIcon />  {/* success check in center */}

By default the arc color is derived from the value (danger → critical → warning → success), like the Vue AvProgressRadial. Set status to force a level, or use status="brand" for a single neutral color (generic progress, not a score):

<ProgressCircle value={60} status="brand" showValue />  {/* brand blue, not orange */}
<ProgressCircle value={90} status="danger" showValue /> {/* forced danger */}

In a table cell, compose the ring with an external label:

<div className="flex items-center gap-2">
  <ProgressCircle value={81} size="sm" />
  <span className="text-sm">81%</span>
</div>

API Reference