Pesto UI

Legend List

A chart key read name-first — status dot, name at full ink, figure beside it — sharing SegmentedBar's dot tokens so a swatch can never drift from its band.

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

Plain

The default: a loose stack with the figure pushed right in muted ink. Name the list with aria-label; it passes straight through to the <ul>.

  • Running6h 52m
  • Queued4h 28m
  • Needs review2h 11m
  • Done1h 36m

Under a bar

Paired with a SegmentedBar fed the same tones. The bar reads the proportion, the key reads the numbers.

  • Running9 runs
  • Queued6 runs
  • Needs review4 runs
  • Done3 runs

Divided, with detail

variant="divided" rules the rows and stacks an optional detail — a share, a change — under the figure in muted caption text.

  • Support agents$4,82043%
  • Research agents$3,15028%
  • Coding agents$2,21020%
  • Ops agents$9208%

Props

PropTypeDefaultDescription
items{ id: string; label: ReactNode; tone: SegmentedBarTone; figure: ReactNode; detail?: ReactNode }[]—One row each. tone is the same key SegmentedBar takes, so a bar and its key share one token per row.
variant"plain" | "divided""plain"A loose stack with a muted figure, or ruled rows with the figure at full ink and detail under it.
aria-labelstring—Names the list. Passed through to the <ul> with every other list attribute.
classNamestring—On the <ul>.
PreviousLabelNext Menubar

Pesto UI · 117 documented components