Segmented Progress Bar
Charts
Progress
Multi-segment horizontal progress visualization for showing distribution and composition.
Preview
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
Props
Component API reference
SegmentedProgressBar
| Prop | Type | Default | Description |
|---|---|---|---|
segments* | Segment[] | — | Array of {label, value, color} objects |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Bar height size |
variant | 'default' | 'rounded' | 'pill' | 'default' | Border radius style |
gap | number | 0 | Gap between segments in pixels |
showLegend | boolean | true | Show legend below bar |
showValues | boolean | true | Show values in legend |
showPercentages | boolean | false | Show percentages in legend |
animated | boolean | true | Enable hover animations |
Segment Type
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | number | — | Optional unique identifier |
label* | string | — | Display label |
value* | number | — | Numeric value |
color* | string | — | CSS color value |
Usage
Import and implementation examples
import { SegmentedProgressBar } from '@/components/ui/segmented-progress-bar'
// Basic usage
<SegmentedProgressBar
segments={[
{ label: 'In Progress', value: 12, color: 'rgb(99, 102, 241)' },
{ label: 'Review', value: 6, color: 'rgb(20, 184, 166)' },
{ label: 'Done', value: 4, color: 'rgb(34, 197, 94)' },
]}
/>
// 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}
/>
// Show percentages
<SegmentedProgressBar
segments={segments}
showPercentages={true}
/>Features
Built-in functionality
- 5 size variants: Extra small to extra large
- 3 shape variants: Default, rounded, and pill
- Interactive hover: Highlight segments on hover
- Configurable gap: Optional spacing between segments
- Flexible legend: Values and percentages display
- Tooltips: Detailed info on hover
- Auto percentages: Automatic calculation
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses role="progressbar" for each segmentaria-valuenow indicates segment valuearia-label describes segment purposeKeyboard Navigation
| Key | Action |
|---|---|
| N/A | Progress bar is not interactive |
Notes
- Legend provides text alternative
- Color is supplemented with labels
- Tooltips show detailed values