Skip to content
Highlight

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'

Playground

Change the props; the preview and the snippet update together.

Exporting transcript
x
Props
40
0
100
Custom format
tsx
<Progress value={40}>  <Progress.Label>Exporting transcript</Progress.Label>  <Progress.Value />  <Progress.Track>    <Progress.Indicator />  </Progress.Track></Progress>

Basic

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

Exporting transcript
x
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
x
Download
x
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-subtle">Download</Progress.Label>        <Progress.Value className="text-success-subtle">{(_, raw) => `${raw} / 500 MB`}</Progress.Value>        <Progress.Track className="bg-success/10">          <Progress.Indicator className="bg-success" />        </Progress.Track>      </Progress>    </div>  )}

Parts

The root, then any compound sub-components. Every part accepts className and forwards the rest of its props to the element or Base UI part beneath it.

Progress
Base UI Progress.Root. value and max set the fill; null is indeterminate.
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.