# UI: ProgressBar

> A labelled progress bar with its value as text.

Source: https://pithyx.org/docs/reference/sdk/ui/progress-bar/
Markdown: https://pithyx.org/docs/reference/sdk/ui/progress-bar.md

A labelled progress bar with its value as text. Import the token file once (`@pithyx/ui/tokens.css`) and wrap the app in `UiProvider`; see [@pithyx/ui](https://pithyx.org/docs/sdk/ui/).

Generated from the TSDoc comments of @pithyx/ui 1.0.0-rc.9 at build time; the text below the headings is the comment in the source.

## Interfaces

### ProgressBarProps

The props of [ProgressBar](#progressbar): React Aria's progress bar props plus the label.

#### Extends

- `Omit`\<`AriaProgressBarProps`, `"className"` \| `"children"`\>

#### Properties

##### label

```ts
label: ReactNode;
```

The label above the bar, also the accessible name.

##### showValue?

```ts
optional showValue?: boolean;
```

Whether the value is shown as text next to the label; true when left out.

##### className?

```ts
optional className?: string;
```

Extra class names, added after the bar's own.

## Functions

### ProgressBar()

```ts
function ProgressBar(props): Element;
```

A labelled progress bar that shows its value as text unless `showValue` is false. Without `value` it is
indeterminate only when `isIndeterminate` is set.

#### Parameters

| Parameter | Type                                    | Description                                                                                        |
| --------- | --------------------------------------- | -------------------------------------------------------------------------------------------------- |
| `props`   | [`ProgressBarProps`](#progressbarprops) | React Aria's progress bar props (`value`, `minValue`, `maxValue`, `formatOptions`) plus the label. |

#### Returns

`Element`

The progress bar with its label.