Progress

Progress is used to display the progress status for a task that takes a long time or consists of several steps. It uses AdaptUI Core's Progress component internally.

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

💡

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

Usage

<Progress value={40}  />

<Progress value={40}  />

Progress sizes

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

import { Progress } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex flex-col space-y-2">
      <Progress size="sm" value={20} />
      <Progress size="md" value={30} />
      <Progress size="lg" value={40} />
      <Progress size="xl" value={50} />
    </div>
  );
};

import { Progress } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex flex-col space-y-2">
      <Progress size="sm" value={20} />
      <Progress size="md" value={30} />
      <Progress size="lg" value={40} />
      <Progress size="xl" value={50} />
    </div>
  );
};

Min max values

Set the min and max values of the progress bar.

import { Progress } from "@adaptui/react-tailwind";

export const App = props => {
  return <Progress min={10} max={40} value={35} />;
};

import { Progress } from "@adaptui/react-tailwind";

export const App = props => {
  return <Progress min={10} max={40} value={35} />;
};

Indeterminate progress

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

import { Progress } from "@adaptui/react-tailwind";

export const App = props => {
  return <Progress value={null} />;
};

import { Progress } from "@adaptui/react-tailwind";

export const App = props => {
  return <Progress value={null} />;
};

Progress Label

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

import { Progress } from "@adaptui/react-tailwind";

export const App = props => {
  return <Progress value={50} label="Loading..." />;
};

import { Progress } from "@adaptui/react-tailwind";

export const App = props => {
  return <Progress value={50} label="Loading..." />;
};

Progress Hint

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

import { Progress } from "@adaptui/react-tailwind";

export const App = props => {
  return <Progress value={50} label="Loading..." hint={50} />;
};

import { Progress } from "@adaptui/react-tailwind";

export const App = props => {
  return <Progress value={50} label="Loading..." hint={50} />;
};

Customizing Progress

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

import { Progress } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <Progress value={40}>
      <ProgressTrack className="bg-red-300" />
      <ProgressBar className="bg-red-800" />
    </Progress>
  );
};

import { Progress } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <Progress value={40}>
      <ProgressTrack className="bg-red-300" />
      <ProgressBar className="bg-red-800" />
    </Progress>
  );
};

API Reference

Prop	Type	Default
`size`	`union`	`md`
`hint`	`React.ReactNode`	-
`label`	`React.ReactNode`	-

Last updated on July 27, 2022