ProgressBar

Accessible progress indicator. Renders role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax. The inner fill width is set via inline style.

Preview

Open Sandbox

Usage


import { ProgressBar } from '@wire-ui/react'
 
<ProgressBar value={65} min={0} max={100} data-size="medium" />

Props

Prop	Type	Default	Description
`value`	`number`	required	Current progress value (clamped to `[min, max]`)
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`...rest`	`HTMLAttributes<HTMLDivElement>`	—	Spread onto root element

Accessibility

role="progressbar" on the root element
aria-valuenow, aria-valuemin, aria-valuemax set automatically from props
Value is clamped — passing a value outside [min, max] is safe