Pesto UI

Segmented Bar

One bar split into proportional bands — spend by category, runs by outcome, storage by type. An optional caption above and a legend below.

tsx
import { SegmentedBar } from "@pestoui/core"

With a legend

Values are absolute counts, not percentages; the bar works out the shares. Each band and its legend dot take the same tone.

Spend by agent type
  • Support42
  • Research29
  • Content19
  • Operations10

Sizes, and an empty tail

A total above the sum leaves the remainder of the track unfilled — used capacity against a limit.

61 of 100 seats

Props

PropTypeDefaultDescription
segmentsBarSegment[]—Required. Each is { id, label, value, tone? }. value is an absolute count; negative and non-finite read as 0.
totalnumbersum of valuesThe denominator. Above the sum it leaves an empty tail.
labelReactNode—Caption above the bar — e.g. “18 runs”.
showLegendbooleanfalseLists every segment under the bar with its dot, label and value.
size"sm" | "default" | "lg""default"Track height: 6, 8 or 12px.
tone"selected" | "success" | "warning" | "destructive" | "info" | "muted" | "chart-1" … "chart-5""selected"Per segment, on each BarSegment.
PreviousSection HeaderNext Select

Pesto UI · 117 documented components