LLabanaat

ProgressBar

Determinate progress bar using native ARIA progressbar semantics (role, aria-valuenow/min/max).

<ProgressBar value={7} max={10} label="Seats used" showValue className="ui-w-64" />

Editable — change the code above and the preview updates live.

Installation

import { ProgressBar } from "@labanaat/ui/progress-bar";

Props

PropTypeDefaultDescription
valuenumberCurrent progress value
maxnumber100Maximum value
labelstringLabel shown above the bar; also sets aria-labelledby
showValuebooleanfalseShows the computed percentage