Progress Bar

Progress indicators in seven styles: bar with percentage, inline label, compact, step segments, label above bar, stepper with labels, and a minimal full-width strip (type 7).

Installation

tsx

import { ProgressBar } from "@workspace/ui/components/progress-bar"

Basic usage

Pass currentStep and totalSteps. Progress is computed as (currentStep / totalSteps) * 100.

tsx

<ProgressBar type="1" currentStep={2} totalSteps={4} />

50% Complete

Types

1 – Bar with percentage below; optional icon and topSlot
2 – Bar with label inside the fill
3 – Compact bar with percentage to the right
4 – Segmented steps (blocks)
5 – Label above the bar
6 – Stepper with circles and optional stepLabels
7 – Minimal strip: full width, ~4px tall, square corners, no labels. Progress is (currentStep / totalSteps) × 100. Use foregroundColor / backgroundColor for fill and track (defaults follow theme).

tsx

<ProgressBar type="2" currentStep={4} totalSteps={5} />
<ProgressBar type="4" currentStep={2} totalSteps={5} />
<ProgressBar
  type="6"
  currentStep={1}
  totalSteps={3}
  stepLabels={["Details", "Review", "Pay"]}
/>

80%80% Complete

Step 2 of 5

Details

Review

Pay

Type 7 (minimal strip)

Flush to the top of a container: no labels, flat two-tone bar, square edges. Typical pairing: overflow-hidden on the card and rounded-* on the outer wrapper.

tsx

<div className="overflow-hidden rounded-xl border bg-card max-w-xl shadow-sm">
  <ProgressBar
    type="7"
    currentStep={1}
    totalSteps={8}
    foregroundColor="#F5820D"
    backgroundColor="#FFEAD2"
  />
  <div className="p-6">
    <p className="font-semibold text-foreground">Current Monthly Power Bill</p>
  </div>
</div>

With icon (type 1)

tsx

<ProgressBar
  type="1"
  currentStep={2}
  totalSteps={4}
  icon={<Check className="size-5 text-primary-foreground" />}
/>

50% Complete

Props

Prop	Type	Default	Description
type	"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7"	"1"	Visual style (see Types section).
currentStep*	number	-	Current step (1-based) or progress numerator.
totalSteps*	number	-	Total steps or progress denominator.
stepLabels	string[]	-	Labels for each step (used by type 6).
backgroundColor	string	var(--muted)	Track/background color.
foregroundColor	string	var(--primary)	Fill/active color.
icon	ReactNode	-	Icon shown on the bar (type 1).
topSlot	ReactNode	-	Content above the bar (type 1).
className	string	-	Additional CSS classes for the wrapper.