Goal Meter

A count advancing toward a fixed goal — a gradient fill with a knob and a percent flag at the current value, the remainder as ticks, and a taller tick standing at the finish. Built on Progress, so it keeps role="progressbar" and the aria-value trio.

tsx

1import { GoalMeter } from "@pestoui/core"

Default

label names the bar; the spoken reading defaults to the rounded percent. The ticks fill whatever is left of the track, and every other one drops out below sm so a narrow card does not turn them into a solid band.

Under a figure

The pairing it was drawn for: the total as a Stat, the meter showing how much of it is live.

Agents deployed

212

Spoken reading & end label

valueText replaces the spoken reading when a count says more than a percent. endLabel replaces the caption over the end tick.

Props

Prop	Type	Default	Description
value	number	—	How far along. Held inside 0..max, so a count past the goal reads as the goal reached.
max	number	—	The goal. Must be greater than 0.
ticks	number	—	Ticks drawn across the unfilled remainder. Every other one hides below the sm breakpoint.
label	string	—	The progressbar's accessible name.
valueText	string	"<percent>% complete"	aria-valuetext — the spoken reading.
endLabel	ReactNode	"100%"	The caption over the end tick. Decorative; hidden from assistive tech.
className	string	—	On the root. Every other div prop is spread there too.

PreviousFilter Bar Next Gradient Mark

Pesto UI · 117 documented components