Data

TrackBar

Horizontal meter — recessive track, chart-ink fill, optional target tick.

Preview

components/data/TrackBar.jsx

The system's meter. Label every bar in text beside it — color is never the only channel.

Usage

src/components/ui/TrackBar.tsx

tsx

import { TrackBar } from "@/components/ui/TrackBar";

<TrackBar value={0.35} max={1} />
<TrackBar value={62} max={100} targetValue={80} />
{/* at most ONE story bar per view: */}
<TrackBar value={83.9} max={100} fill="var(--rust-500)" targetValue={40} />

API

props

Prop	Type	Default	Description
value	number	—	Current value.
max	number	—	Scale maximum (fill = value / max).
fill	string	"var(--ink-300)"	Fill color — chart ink; rust for the one story mark.
targetValue	number \| null	—	Goal rendered as a 2px fg tick.
height	number	10	Track height in px.
title	string	—	Tooltip with the exact reading.

Tokens consumed

semantic only

--color-bg-hover--color-fg--ink-300