import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";

import Basic from "examples/progress-bar/basic.tsx";
import Negative from "examples/progress-bar/negative.tsx";
import WithLabel from "examples/progress-bar/with-label.tsx";
import CustomLabel from "examples/progress-bar/custom-label.tsx";
import Customization from "examples/progress-bar/overrides.tsx";
import Steps from "examples/progress-bar/steps.tsx";
import ProgressBarRounded from "examples/progress-bar/rounded.tsx";

import { ProgressBar } from "baseui/progress-bar";
import * as ProgressBarExports from "baseui/progress-bar";

import Yard from "../../components/yard/index";
import progressBarYardConfig from "../../components/yard/config/progress-bar";

export default Layout;

# Progress Bar

<Yard placeholderHeight={28} {...progressBarYardConfig} />

Indicates a wait time for actions - either within an experience flow or loading data.

## Accessibility

- The progress bar always sets `role="progressbar"`
- When `infinite` is `false` (the progress bar is determinate), these determinate aria tags are set:
  - `aria-valuenow={value}`
  - `aria-valuemin={0}`
  - `aria-valuemax={100}`

## Examples

<Example title="Progress bar Basic Usage" path="progress-bar/basic.tsx">
  <Basic />
</Example>

<Example
  title="Progress bar with Negative Color"
  path="progress-bar/negative.tsx"
>
  <Negative />
</Example>

<Example
  title="Progress bar with Visible Label"
  path="progress-bar/with-label.tsx"
>
  <WithLabel />
</Example>

<Example
  title="Progress bar with Custom Label"
  path="progress-bar/custom-label.tsx"
>
  <CustomLabel />
</Example>

<Example title="Progress bar with Overrides" path="progress-bar/overrides.tsx">
  <Customization />
</Example>

## Stepped Progress Bar

There is a stepped version of the progress bar. This is useful when an action requires a determinate amount of steps or stages to complete. Each step is a waiting indicator progressing by system action or human interaction.

<Example title="Steps" path="progress-bar/steps.tsx">
  <Steps />
</Example>

## Progress bar rounded

There also is a rounded version of the progress bar

<Example title="Basic Usage" path="progress-bar/rounded.tsx">
  <ProgressBarRounded />
</Example>

<Exports
  component={ProgressBarExports}
  title="Progress Bar exports"
  path="baseui/progress-bar"
/>