# Progress

Source: /tuil/docs/reference/components/feedback/progress
Locale: en

Progress component API, behavior, and executable example.





{/* Generated by tooling/docs/generate-reference.ts. */}

<PublishedStory storyId="component-acceptance" variant="Alert" />

## API and events [#api-and-events]

Communicate messages, completion, and pending work with theme tokens and reduced-motion behavior.

```tsx
export function Progress({
  value,
  max = 100,
  width = 20,
  showValue = true,
  slots,
  slotProps,
  ...props
}: ProgressProps): ReactNode;
```

### Props, functions, and events [#props-functions-and-events]

| Member      | Type                                                                                                                           | Required | Description                                                                                                                                                              | Related types                                                                                                                      |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
| `id`        | `string \| undefined`                                                                                                          | No       | The `id` member uses the `string \| undefined` contract.                                                                                                                 | —                                                                                                                                  |
| `testId`    | `string \| undefined`                                                                                                          | No       | The `testId` member uses the `string \| undefined` contract.                                                                                                             | —                                                                                                                                  |
| `label`     | `string \| undefined`                                                                                                          | No       | The `label` member uses the `string \| undefined` contract.                                                                                                              | —                                                                                                                                  |
| `value`     | `number`                                                                                                                       | Yes      | The `value` member uses the `number` contract.                                                                                                                           | —                                                                                                                                  |
| `max`       | `number \| undefined`                                                                                                          | No       | The `max` member uses the `number \| undefined` contract.                                                                                                                | —                                                                                                                                  |
| `width`     | `number \| undefined`                                                                                                          | No       | The `width` member uses the `number \| undefined` contract.                                                                                                              | —                                                                                                                                  |
| `showValue` | `boolean \| undefined`                                                                                                         | No       | The `showValue` member uses the `boolean \| undefined` contract.                                                                                                         | —                                                                                                                                  |
| `disabled`  | `boolean \| undefined`                                                                                                         | No       | The `disabled` member uses the `boolean \| undefined` contract.                                                                                                          | —                                                                                                                                  |
| `readOnly`  | `boolean \| undefined`                                                                                                         | No       | The `readOnly` member uses the `boolean \| undefined` contract.                                                                                                          | —                                                                                                                                  |
| `slots`     | `Partial<SlotComponents<&#123; root: import("../../../registry/data-display/text").TextProps; &#125;>> \| undefined`           | No       | The `slots` member uses the `Partial<SlotComponents<&#123; root: import("../../../registry/data-display/text").TextProps; &#125;>> \| undefined` contract.               | [`SlotComponents`](/tuil/docs/reference/packages/theme/api/slot-components), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props) |
| `slotProps` | `Partial<SlotProps<&#123; root: import("../../../registry/data-display/text").TextProps; &#125;, ProgressState>> \| undefined` | No       | The `slotProps` member uses the `Partial<SlotProps<&#123; root: import("../../../registry/data-display/text").TextProps; &#125;, ProgressState>> \| undefined` contract. | [`SlotProps`](/tuil/docs/reference/packages/theme/api/slot-props), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props)           |
| `unstyled`  | `boolean \| undefined`                                                                                                         | No       | The `unstyled` member uses the `boolean \| undefined` contract.                                                                                                          | —                                                                                                                                  |
| `variant`   | `string \| undefined`                                                                                                          | No       | The `variant` member uses the `string \| undefined` contract.                                                                                                            | —                                                                                                                                  |
| `size`      | `"sm" \| "md" \| "lg" \| undefined`                                                                                            | No       | The `size` member uses the `"sm" \| "md" \| "lg" \| undefined` contract.                                                                                                 | —                                                                                                                                  |

No events are emitted.

Callback props run after the documented input is accepted. Callbacks are not cancellable unless their return type or description states otherwise.

## Interaction and capabilities [#interaction-and-capabilities]

Read-only; update props as application state changes.

The published manifest records keyboard, focus, pointer, theme, terminal, semantic, event, and dependency requirements.

## Complete import [#complete-import]

```tsx
import { Progress } from "@/components/tuil/feedback/alert";
```