Skip to content
Docs
Components
Feedback
Progress

Progress

Progress is used to display the progress status for a task that takes a long time or consists of several steps.

Imports

import {
  Progress,
  ProgressBar,
  ProgressHint,
  ProgressLabel,
  useProgressProps,
  useProgressState,
  ProgressTrack,
  ProgressWrapper,
} from "@adaptui/react-tailwind";
💡

A complex component that supports customization as per the composition guide.

Usage

Progress sizes

Sizes can be set using the size prop. The default size is md. The available sizes are: sm md lg xl

Min max values

Set the min and max values of the progress bar.

Indeterminate progress

By setting the value prop to null, progress state becomes indeterminate

Progress Label

Progress also comes with A11y label that can also be used to describe the progress status

Progress Hint

Progress comes with A11y hint that can be used with label to indicate the progress status.

Customizing Progress

To customize the appearance of the Progress component we can simply pass down children components (ProgressTrack, ProgressBar) for more control.

API Reference

Prop

Type

Default

sizeunionmd
hintReact.ReactNode-
labelReact.ReactNode-
Last updated on June 8, 2023