Progress

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Show progress for a task that will finish. Set value=null when the total is unknown. Drive it from the real task state. Announce the completed result separately.

Don't advance progress just because time has passed. Update it from the real task. Use Meter to show usage.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Root → Label + Value + Track(Indicator)

Keyboard and accessibility

Progress is a status display and isn't in the Tab order. Label provides the accessible name. The min, max, and value props, with aria-valuetext, convey the units. Don't announce every frequent value change through a live region. Announce the completed result instead.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Progress } from '@surflane/ui'

<Progress.Root value={30} aria-valuetext='30 of 100 checks completed'>
  <Progress.Label>Deployment progress</Progress.Label>
  <Progress.Value>
    {(formatted, value) => (value === null ? 'Waiting' : formatted)}
  </Progress.Value>
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
</Progress.Root>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens