ComponentsUpdated Sep 9, 2026

Progress

Determinate progress with a label and value laid out on a two-column grid. Built on Base UI Progress, so it is announced correctly.

Import

Source: packages/ui/src/components/progress

tsx

import { Progress } from '@highlight/ui'

Basic

Label and Value sit on the first row, Track below.

Exporting transcript

tsx

import { useEffect, useState } from 'react'
import { Progress } from '@highlight/ui'

export default function ProgressBasic() {
  const [value, setValue] = useState(20)

  useEffect(() => {
    const timer = setInterval(() => {
      setValue((current) => (current >= 100 ? 0 : Math.min(100, current + 15)))
    }, 1200)
    return () => clearInterval(timer)
  }, [])

  return (
    <Progress value={value} className="w-64">
      <Progress.Label>Exporting transcript</Progress.Label>
      <Progress.Value />
      <Progress.Track>
        <Progress.Indicator />
      </Progress.Track>
    </Progress>
  )
}

Custom range and styling

min and max set the range; Value takes a render function for custom formatting.

Storage

Download

tsx

import { Progress } from '@highlight/ui'

export default function ProgressCustom() {
  return (
    <div className="flex w-64 flex-col gap-6">
      <Progress value={68}>
        <Progress.Label>Storage</Progress.Label>
        <Progress.Value />
        <Progress.Track className="h-2 rounded-full">
          <Progress.Indicator className="bg-brand rounded-full" />
        </Progress.Track>
      </Progress>
      <Progress value={320} min={0} max={500}>
        <Progress.Label className="text-success">Download</Progress.Label>
        <Progress.Value className="text-success">{(_, raw) => `${raw} / 500 MB`}</Progress.Value>
        <Progress.Track className="bg-success/10">
          <Progress.Indicator className="bg-success" />
        </Progress.Track>
      </Progress>
    </div>
  )
}

Parts

Compound sub-components. Every part accepts className and forwards the rest of its props to Base UI.

Progress.Label: Text label, left column.
Progress.Value: Formatted value, right column. Children may be a (formatted, raw) => ReactNode function.
Progress.Track: The rail.
Progress.Indicator: The filled portion.