Skip to content

progress.mdx

Latest commit

 

History

History
116 lines (87 loc) · 2.47 KB

progress.mdx

File metadata and controls

116 lines (87 loc) · 2.47 KB

import { ComponentLinks, InteractiveCodeblock, PropsTable, Codeblock, } from "@/components/index";

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";

<Nextra.Callout> A complex component that supports customization as per the composition guide. </Nextra.Callout>

Usage

<InteractiveCodeblock children={({ spreadProps }) => <Progress value={40} ${spreadProps} />} themeProps={{ size: "progress.size" }} />

Progress sizes

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

<Codeblock live code={`

`} />

Min max values

Set the min and max values of the progress bar.

<Codeblock live code={<Progress min={10} max={40} value={35} />} />

Indeterminate progress

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

<Codeblock live code={<Progress value={null} />} />

Progress Label

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

<Codeblock live code={<Progress value={50} label="Loading..."/>} />

Progress Hint

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

<Codeblock live code={<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.

<Codeblock live code={<Progress value={40}> <ProgressTrack className="bg-red-300" /> <ProgressBar className="bg-red-800" /> </Progress>} />

API Reference

<PropsTable data={[ { name: "size", themeKey: "progress.size", default: "md" }, { name: "hint", type: "React.ReactNode", description: "Hint component to display info center of the progressbar", }, { name: "label", type: "React.ReactNode", description: "Label slot to pass the label", },

]} />