Progress

Displays an indicator showing the completion progress of a task.

tsx

1
2
3
4
5<div className="w-full max-w-md space-y-4">
  {[0, 33, 66, 100].map((v) => (
    <Progress key={v} value={v} ariaLabel={"Progress, step " + v} />
  ))}
</div>

Progress is a horizontal bar that shows progress from 0 to max (100 by default). Useful for uploads, installs and batch operations. Without a value it is indeterminate for assistive technologies, but the bar stays empty: for a visible "in progress" state, prefer Spinner.

Installation

Terminal

$ bext ui add progress

Copy and paste the following into src/components/ui/progress.tsx.

progress.tsx

1
2
3
4
5<div className="w-full max-w-md space-y-4">
  {[0, 33, 66, 100].map((v) => (
    <Progress key={v} value={v} ariaLabel={"Progress, step " + v} />
  ))}
</div>

Usage

tsx

1
2
3import { Progress } from "@bext-stack/ui/primitives"

<Progress value={60} ariaLabel="Upload" />

Anatomy

<Progress value={60} ariaLabel="Upload" />     // value: 0 to max (100)

API Reference

Progress

Prop	Type	Default	Description
value	number	—	Current value, from 0 to max; values outside the range are clamped. Written to aria-valuenow. When omitted, aria-valuenow is left out (indeterminate) and the bar is empty.
max	number	100	Value that fills the bar. Written to aria-valuemax.
ariaLabel	string	—	Accessible name of the progress bar (aria-label). Set it: a progressbar needs a name.
className	string	—	Extra classes on the track (h-2 w-full rounded-full by default).

Accessibility

The track sets role="progressbar", aria-valuemin="0", aria-valuemax (the max prop) and aria-valuenow (the clamped value). When value is omitted, aria-valuenow is left out, which assistive technologies read as indeterminate.

A progress bar needs an accessible name: pass ariaLabel. There is no prop for aria-labelledby or aria-valuetext.

Try it live Open in play

Edit this example live in the bext playground. It compiles and runs entirely in your browser.

src/app/page.tsx 1 file · react · runs in your browser

// A progress bar shows completion of a task. The filled portion is
// a coloured inner div whose width is the percentage.
function Bar({ value }) {
  return (
    <div style={{ width: "100%", height: 10, borderRadius: 9999, background: "#f1f5f9", overflow: "hidden" }}>
      <div style={{ width: value + "%", height: "100%", background: "#0a0a0a", borderRadius: 9999, transition: "width 200ms ease" }} />
    </div>
  );
}

export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Progress</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>An indicator of task completion.</p>
      <div style={{ display: "grid", gap: 18, marginTop: 22, maxWidth: 360 }}>

The React idiom: same UI, for comparison.

← Popover Radio Group →

On This Page