Segmented Process

A multi-segment progress bar for showing how a total breaks down into parts, with per-segment tooltips and optional threshold markers.

Source Tailwind CSS

Unstable: this component's API may still change between releases. Depend on it, but expect to update call sites on upgrade.

package showcase

import "github.com/kerkenes/templ-ui/components/segmentedprocess"

templ SegmentedProcessDefault() {
	<div class="w-full max-w-md">
		@segmentedprocess.SegmentedProcess(segmentedprocess.Props{
			Max: 100,
			Segments: []segmentedprocess.Segment{
				{Label: "Segment A", Value: 45},
				{Label: "Segment B", Value: 30},
				{Label: "Segment C", Value: 15},
			},
		})
	</div>
}

Installation

import "github.com/kerkenes/templ-ui/components/segmentedprocess"

Load the script once in your layout:

<head>
  @segmentedprocess.Script()
</head>

Examples

Thresholds

70 GB

package showcase

import "github.com/kerkenes/templ-ui/components/segmentedprocess"

templ SegmentedProcessThresholds() {
	<div class="w-full max-w-md">
		@segmentedprocess.SegmentedProcess(segmentedprocess.Props{
			Max:  100,
			Unit: "GB",
			Segments: []segmentedprocess.Segment{
				{Label: "Builds", Value: 32},
				{Label: "Logs", Value: 14},
				{Label: "Backups", Value: 8},
			},
			Thresholds: []segmentedprocess.Threshold{
				{Value: 70, Label: "70 GB", Variant: segmentedprocess.ThresholdVariantWarning},
			},
		})
	</div>
}

Domain Compress

DomainCompress: false

100

DomainCompress: true

100

package showcase

import "github.com/kerkenes/templ-ui/components/segmentedprocess"

// Without DomainCompress, this bar's Max (1000) would squeeze the
// interesting range (0-111) into the first 11% of the width. With it,
// the domain scales to the last threshold instead, so the segments and
// threshold stay readable.
templ SegmentedProcessDomainCompress() {
	<div class="w-full max-w-md space-y-6">
		<div>
			<p class="mb-2 text-sm text-muted-foreground">DomainCompress: false</p>
			@segmentedprocess.SegmentedProcess(segmentedprocess.Props{
				Max: 1000,
				Segments: []segmentedprocess.Segment{
					{Label: "Used", Value: 82},
					{Label: "Reserved", Value: 20},
				},
				Thresholds: []segmentedprocess.Threshold{
					{Value: 100, Label: "100", Variant: segmentedprocess.ThresholdVariantWarning},
				},
			})
		</div>
		<div>
			<p class="mb-2 text-sm text-muted-foreground">DomainCompress: true</p>
			@segmentedprocess.SegmentedProcess(segmentedprocess.Props{
				Max:            1000,
				DomainCompress: true,
				Segments: []segmentedprocess.Segment{
					{Label: "Used", Value: 82},
					{Label: "Reserved", Value: 20},
				},
				Thresholds: []segmentedprocess.Threshold{
					{Value: 100, Label: "100", Variant: segmentedprocess.ThresholdVariantWarning},
				},
			})
		</div>
	</div>
}

Custom Height

package showcase

import "github.com/kerkenes/templ-ui/components/segmentedprocess"

templ SegmentedProcessHeight() {
	<div class="w-full max-w-md">
		@segmentedprocess.SegmentedProcess(segmentedprocess.Props{
			Max:    100,
			Height: 24,
			Segments: []segmentedprocess.Segment{
				{Label: "Segment A", Value: 45},
				{Label: "Segment B", Value: 30},
				{Label: "Segment C", Value: 15},
			},
		})
	</div>
}

API Reference

Required parameter

Hover for description

SegmentedProcess

Multi-segment progress bar with per-segment tooltips and threshold markers.

Name	Type	Default
`ID` Unique identifier for the root element.	`string`	-
`Class` Additional CSS classes to apply to the root element.	`string`	-
`Attributes` Additional HTML attributes to apply to the root element.	`templ.Attributes`	-
`Segments` Segments stacked left to right. Each has a Label and a Value; color cycles through the chart palette by position.	`[]Segment`	-
`Max` The domain the bar represents 100% of, unless DomainCompress overrides it.	`float64`	`0`
`Thresholds` Optional target markers drawn above the bar. Each has a Value, Label, and Variant ('default', 'success', 'danger', 'warning').	`[]Threshold`	-
`DomainCompress` Scale the bar's visual domain to the last threshold (placed at 90% of the bar's width) instead of Max. Ignored without thresholds.	`bool`	`false`
`Unit` Appended to displayed values, e.g. 'GB'.	`string`	-
`Height` Bar height in pixels.	`int`	`12`
`AriaLabel` Overrides the generated "X of Y unit used" summary read by screen readers.	`string`	-

Menu

Getting Started

Components

Segmented Process

Installation

Examples

API Reference

SegmentedProcess