# ProgressBar

> A styled native `<progress>` control paired with an optional value label, stacked in a single column so a caption can sit alongside the bar it describes.

```ts
import { ProgressBar } from "@sdxc/ui";
```

Renders the root column: a `<div>` stacking ProgressBar.Indicator
and an optional ProgressBar.ValueLabel, carrying no ARIA of its
own since the `<progress>` inside already exposes progressbar semantics.

## Examples

```tsx
<ProgressBar>
	<ProgressBar.Indicator value={70} max={100} aria-label={t("upload.progress")} />
	<ProgressBar.ValueLabel>{t("upload.percent", { value: 70 })}</ProgressBar.ValueLabel>
</ProgressBar>
```

## Props

Also accepts everything in `TagProps<"div">`.


### ProgressBar.Indicator

Renders the busy/progress indicator: a native `<progress>` restyled as a pill track.

Also accepts everything in `TagProps<"progress">`.


### ProgressBar.ValueLabel

Renders the indicator's caption: a `<span>` sized as a small run of body copy in the neutral muted foreground color, for a percentage or status string placed alongside ProgressBar.Indicator.

Also accepts everything in `TagProps<"span">`.