Segmented Progress Bar
Ready
Multi-segment horizontal progress visualization for showing distribution and composition
Basic Example
A simple segmented progress bar with legend
In Progress12
Under Review6
Completed4
Sizes
Available size variants from extra small to extra large
xs
sm
md
lg
xl
Variants
Different border radius styles
Default (square corners)
Rounded
Pill (fully rounded)
With Gap
Add spacing between segments
No gap (default)
2px gap
4px gap
Use Cases
Common applications for segmented progress bars
Task Status
22 total tasks
In Progress12
Under Review6
Completed4
Budget Allocation
$180k total budget
Development85
Marketing45
Operations32
HR18
Customer Satisfaction
268 responses
Satisfied156
Neutral89
Dissatisfied23
Usage
How to use the SegmentedProgressBar component
// Basic usage
<SegmentedProgressBar
segments={[
{ label: 'In Progress', value: 12, color: 'indigo' },
{ label: 'Review', value: 6, color: 'teal' },
{ label: 'Done', value: 4, color: 'green' },
]}
/>
// With size and variant
<SegmentedProgressBar
segments={segments}
size="lg"
variant="pill"
/>
// With gap between segments
<SegmentedProgressBar
segments={segments}
gap={2}
variant="rounded"
/>
// Hide legend
<SegmentedProgressBar
segments={segments}
showLegend={false}
/>API Reference
Props
segments-Array of {label, value, color} objects (required)size-"xs" | "sm" | "md" | "lg" | "xl" (default: "md")variant-"default" | "rounded" | "pill" (default: "default")gap-number - Gap between segments in pixels (default: 0)showLegend-boolean - Show legend below bar (default: true)showValues-boolean - Show values in legend (default: true)showPercentages-boolean - Show percentages (default: false)animated-boolean - Enable hover animations (default: true)Features
- Five size variants for different contexts
- Three shape variants (default, rounded, pill)
- Interactive hover states with highlight effect
- Configurable gap between segments
- Flexible legend with value and percentage display
- Dark mode support