Progress

Progress components communicate completion state for workflows (uploads, exports, sync), and multi-step processes (enrollment, plan approvals, intake pipelines). They are token-driven, theme-safe, RTL-safe, and include accessible semantics.

Buffered Progress

Enterprise pattern for streaming/prefetch: value shows confirmed progress; buffer shows loaded-ahead.

Streaming upload

42%

Show code

import { Progress } from "@/design-system/components/Progress";

export function Example() {
  return (
    <Progress
      value={42}
      bufferValue={70}
      tone="primary"
      label="Streaming upload"
      labelMode="top"
    />
  );
}

Premium Shine + Glow

Optional premium effect for primary workflows. Reduced-motion safe.

Publishing

64%

Show code

import { Progress } from "@/design-system/components/Progress";

export function Example() {
  return (
    <Progress
      value={64}
      tone="primary"
      glow
      shine
      label="Publishing"
      labelMode="top"
    />
  );
}

Progress Ring

Premium circular progress for dashboards and KPIs.

Completion

72%

Show code

import { ProgressRing } from "@/design-system/components/Progress";

export function Example() {
  return (
    <ProgressRing
      value={72}
      tone="success"
      size="lg"
      label="Completion"
    />
  );
}

Timeline Steps

Vertical timeline variant for intake pipelines, onboarding, approvals.

Intake received
Portal submission
Clinical review
Eligibility and needs
Scheduling
Assign workspace admin
Start services
First session booked

Show code

import { ProgressSteps } from "@/design-system/components/Progress";

export function Example() {
  return (
    <ProgressSteps
      variant="timeline"
      orientation="vertical"
      tone="primary"
      steps={[
        { id: "intake", title: "Intake received", description: "Portal submission" },
        { id: "review", title: "Clinical review", description: "Eligibility and needs" },
        { id: "schedule", title: "Scheduling", description: "Assign workspace admin" },
        { id: "start", title: "Start services", description: "First session booked" },
      ]}
      currentIndex={1}
    />
  );
}

import { Progress } from "@/design-system/components/Progress"; export function Example() { return ( <Progress value={42} bufferValue={70} tone="primary" label="Streaming upload" labelMode="top" /> ); }

import { Progress } from "@/design-system/components/Progress"; export function Example() { return ( <Progress value={64} tone="primary" glow shine label="Publishing" labelMode="top" /> ); }

import { ProgressRing } from "@/design-system/components/Progress"; export function Example() { return ( <ProgressRing value={72} tone="success" size="lg" label="Completion" /> ); }

import { ProgressSteps } from "@/design-system/components/Progress"; export function Example() { return ( <ProgressSteps variant="timeline" orientation="vertical" tone="primary" steps={[ { id: "intake", title: "Intake received", description: "Portal submission" }, { id: "review", title: "Clinical review", description: "Eligibility and needs" }, { id: "schedule", title: "Scheduling", description: "Assign workspace admin" }, { id: "start", title: "Start services", description: "First session booked" }, ]} currentIndex={1} /> ); }