Progress State

Current progression through a workflow.

html

<div class="progress-state progress-state--bar" data-current-step="2" style="--accent:#BFD9F2;">
  <h3 class="progress-state__title">Order fulfilment</h3>
  <p class="progress-state__status">Step 2 of 4</p>
  <div class="progress-state__bar-track">
    <div class="progress-state__bar-fill" style="width:calc(2 / 4 * 100%);"></div>
  </div>
  <ol class="progress-state__steps">
    <li class="progress-state__step"><span class="progress-state__dot"></span><span class="progress-state__label">Received</span></li>
    <li class="progress-state__step"><span class="progress-state__dot"></span><span class="progress-state__label">Confirmed</span></li>
    <li class="progress-state__step"><span class="progress-state__dot"></span><span class="progress-state__label">Packed</span></li>
    <li class="progress-state__step"><span class="progress-state__dot"></span><span class="progress-state__label">Shipped</span></li>
  </ol>
</div>
<style>
.progress-state { font: 15px/1.5 system-ui, sans-serif; max-width: 380px; padding: 20px; background: #FAF7F2; color: #241430; border-radius: 14px; border: 1.5px solid #24143020; }
.progress-state__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.progress-state__status { margin: 0 0 12px; font-size: 13px; color: #24143099; }
.progress-state__bar-track { display: none; height: 8px; border-radius: 4px; background: #24143014; overflow: hidden; }
.progress-state__bar-fill { height: 100%; background: var(--accent); border-radius: 4px; }
.progress-state--bar .progress-state__bar-track { display: block; }
.progress-state__steps { display: none; list-style: none; margin: 0; padding: 0; gap: 18px; }
.progress-state--steps .progress-state__steps { display: flex; }
.progress-state__step { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; }
.progress-state__dot { width: 12px; height: 12px; border-radius: 50%; background: #24143020; }
.progress-state__label { color: #241430cc; }
.progress-state[data-current-step="1"] .progress-state__step:nth-child(-n+1) .progress-state__dot { background: var(--accent); }
.progress-state[data-current-step="2"] .progress-state__step:nth-child(-n+2) .progress-state__dot { background: var(--accent); }
.progress-state[data-current-step="3"] .progress-state__step:nth-child(-n+3) .progress-state__dot { background: var(--accent); }
.progress-state[data-current-step="4"] .progress-state__step:nth-child(-n+4) .progress-state__dot { background: var(--accent); }
</style>

tailwind

<div class="progress-tw progress-tw--bar font-sans max-w-[380px] p-5 bg-[#FAF7F2] text-[#241430] rounded-2xl border-[1.5px] border-[#24143020]" data-current-step="2">
  <h3 class="m-0 mb-1 text-base font-bold">Order fulfilment</h3>
  <p class="m-0 mb-3 text-[13px] text-[#241430]/60">Step 2 of 4</p>
  <div class="progress-tw__bar-track h-2 rounded-full bg-[#24143014] overflow-hidden">
    <div class="h-full rounded-full" style="width:calc(2 / 4 * 100%);background:#BFD9F2"></div>
  </div>
  <ol class="progress-tw__steps list-none m-0 p-0 gap-[18px]">
    <li class="flex flex-col items-center gap-1.5 text-xs"><span class="w-3 h-3 rounded-full bg-[#24143020]"></span><span class="text-[#241430]/80">Received</span></li>
    <li class="flex flex-col items-center gap-1.5 text-xs"><span class="w-3 h-3 rounded-full bg-[#24143020]"></span><span class="text-[#241430]/80">Confirmed</span></li>
    <li class="flex flex-col items-center gap-1.5 text-xs"><span class="w-3 h-3 rounded-full bg-[#24143020]"></span><span class="text-[#241430]/80">Packed</span></li>
    <li class="flex flex-col items-center gap-1.5 text-xs"><span class="w-3 h-3 rounded-full bg-[#24143020]"></span><span class="text-[#241430]/80">Shipped</span></li>
  </ol>
</div>
<style>
.progress-tw__bar-track { display: none; }
.progress-tw--bar .progress-tw__bar-track { display: block; }
.progress-tw__steps { display: none; }
.progress-tw--steps .progress-tw__steps { display: flex; }
</style>

react

export function ProgressState({
  workflowTitle = "Order fulfilment",
  currentStep = 2,
  variant = "bar",
  accent = "#BFD9F2",
  showLabels = true,
}) {
  const steps = ["Received", "Confirmed", "Packed", "Shipped"];
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", maxWidth: 380, padding: 20, background: "#FAF7F2",
      color: "#241430", borderRadius: 14, border: "1.5px solid #24143020" }}>
      <h3 style={{ margin: "0 0 4px", fontSize: 16, fontWeight: 700 }}>{workflowTitle}</h3>
      <p style={{ margin: "0 0 12px", fontSize: 13, color: "#24143099" }}>Step {currentStep} of 4</p>
      {variant === "bar" ? (
        <div style={{ height: 8, borderRadius: 4, background: "#24143014", overflow: "hidden" }}>
          <div style={{ height: "100%", borderRadius: 4, background: accent, width: `${(currentStep / 4) * 100}%` }} />
        </div>
      ) : (
        <ol style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", gap: 18 }}>
          {steps.map((label, i) => (
            <li key={label} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6, fontSize: 12 }}>
              <span style={{ width: 12, height: 12, borderRadius: "50%", background: i + 1 <= currentStep ? accent : "#24143020" }} />
              {showLabels && <span style={{ color: "#241430cc" }}>{label}</span>}
            </li>
          ))}
        </ol>
      )}
    </div>
  );
}