# @askrjs/ui/progress

> Published API exports for @askrjs/ui/progress.

Source: [https://askrjs.com/docs/reference/api/ui/progress](https://askrjs.com/docs/reference/api/ui/progress)

Status: stable. Packages: @askrjs/ui/progress.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 8 exports from the declarations shipped by @askrjs/ui.

### `Progress`

```ts
Progress: (props: ProgressProps) => JSX.Element
```

Renders the `progress` part of `progress` with `role="progressbar"`.

### `PROGRESS_A11Y_CONTRACT`

```ts
PROGRESS_A11Y_CONTRACT: { readonly ROLE: "progressbar"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly percentage: "data-percentage"; }; readonly VALUE_NOW_ATTRIBUTE: "aria-valuenow"; readonly VALUE_MIN_ATTRIBUTE: "aria-valuemin"; readonly VALUE_MAX_ATTRIBUTE: "aria-valuemax"; readonly INDICATOR_MARKER: "data-progress-indicator"; readonly INDICATOR_PERCENTAGE_ATTRIBUTE: "data-percentage"; }
```

WAI-ARIA progressbar contract for linear progress.

### `ProgressA11yContract`

```ts
ProgressA11yContract: typeof PROGRESS_A11Y_CONTRACT
```

Type of the Progress A11y Contract object.

### `ProgressIndicator`

```ts
ProgressIndicator: { (props: ProgressIndicatorProps): JSX.Element; (props: ProgressIndicatorAsChildProps): JSX.Element; }
```

Renders the `progress-indicator` part of `progress`.

Supports polymorphic rendering via `asChild`.

### `ProgressIndicatorAsChildProps`

```ts
ProgressIndicatorAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Progress Indicator.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `ProgressIndicatorProps`

```ts
ProgressIndicatorProps: BoxProps<'div', HTMLDivElement>
```

Props for Progress Indicator.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `ProgressOwnProps`

```ts
ProgressOwnProps: {
  children?: unknown;
  id?: string;
  value?: number | null;
  max?: number;
  getValueLabel?: (value: number | null, max: number) => string;
}
```

Own props for Progress, before merging with native element attributes.

- `children`: children?: unknown;

- `getValueLabel`: getValueLabel?: ((value: number | null, max: number) => string) | undefined;

- `id`: id?: string | undefined;

- `max`: max?: number | undefined;

- `value`: value?: number | null | undefined;

### `ProgressProps`

```ts
ProgressProps: BoxProps<'div', HTMLDivElement> & ProgressOwnProps
```

Props for Progress.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `getValueLabel`: getValueLabel?: ((value: number | null, max: number) => string) | undefined;

- `id`: id?: string | undefined;

- `max`: max?: number | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `value`: value?: number | null | undefined;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/label/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/progress-circle/index.md)