---
title: Migrate ProgressBar from Polaris React
description: Learn how to migrate Polaris React ProgressBar to Polaris web components.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/progress-bar
  md: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/progress-bar.md
api_name: app-home
---

# Migrate Progress​Bar from Polaris React

Replace Polaris React `ProgressBar` with `s-progress`. Preserve the measured value and accessible purpose, and omit `value` only when the duration can't be quantified.

`s-progress` is available in [Polaris 1.1](https://shopify.dev/docs/api/app-home/v1.1/web-components/versioning) and later. The stable channel, `polaris-1.js`, includes it; install `@shopify/polaris-types@^1.1.0` alongside it. If you pin `polaris-1.1.js` instead, use `@shopify/polaris-types@~1.1.0` so the types stay on 1.1 like the script tag.

***

## Choose the destination

| Polaris React | Polaris web components | Migration type |
| - | - | - |
| `ProgressBar` | `s-progress` | Direct |

***

## Map progress values

| Polaris React | Polaris web components | Migration notes |
| - | - | - |
| `progress` from 0 to 100 | `value` with `max={100}` | Keep the existing percentage scale and ensure the value remains between zero and `max`. |
| `ariaLabelledBy` | `accessibilityLabel` | Write a concise label that names the task and current progress. Don't rely on a Polaris React DOM ID relationship after removing the old component. |
| `tone="primary"` | `tone="auto"` | Use the default brand treatment. |
| `tone="highlight"` | `tone="info"` | Preserve the informational meaning rather than matching the old color mechanically. |
| `tone="success"` or `tone="critical"` | `tone="success"` or `tone="critical"` | Map these semantic tones directly. |
| `size` | Remove | `s-progress` has one supported height. Remove layout assumptions based on the old small, medium, or large sizes. |
| `animated` | Remove | The component owns its visual behavior. Don't add CSS to recreate the Polaris React animation toggle. |

`s-progress` also supports values on scales other than 100 by setting `max`. Omit the `value` property for indeterminate progress, and use an `accessibilityLabel` that describes the activity without announcing a fabricated percentage.

***

## Migrate the call site

1. Identify whether each bar is determinate. For a percentage, use `max={100}`. For counts or amounts, preserve their natural scale with a matching `max`.

2. Replace `ariaLabelledBy` with an `accessibilityLabel` that includes the task and current value when determinate.

3. Map semantic tones, then remove old size and animation props instead of recreating them with CSS.

4. After verification, remove the `ProgressBar` import and any Polaris-only state, wrappers, or helpers that no longer have a caller.

***

## Preserve these behaviors

* The numeric scale and source of progress state.
* An accessible label that distinguishes multiple progress indicators on a page.
* Semantic success, informational, or critical meaning.

***

## Test and remove Polaris React

Test zero, partial, and complete values, plus the indeterminate state if used. Add a unit test for the calculation that keeps `value` between zero and `max`. Verify the accessible label at each state and confirm that the bar fills its containing layout without app CSS reaching into its shadow root.

Don't remove `@shopify/polaris` while another component still imports it. Once all call sites are migrated, remove the package and its provider-level setup, then run the app's full test suite.

***

## Migration example

## Migrating ProgressBar

##### Polaris web components

```tsx
// @validate-ignore: Property 's-progress' does not exist on type 'JSX.IntrinsicElements'
export function ProgressBarMigrationExample() {
  return (
    <s-stack gap="small">
      <s-text>Import progress</s-text>
      <s-progress
        value={60}
        max={100}
        tone="auto"
        accessibilityLabel="Import progress: 60 percent complete"
      />
    </s-stack>
  );
}
```

##### Polaris React

```tsx
import {BlockStack, ProgressBar, Text} from '@shopify/polaris';


export function ProgressBarMigrationExample() {

  return (
    <BlockStack gap="200">
      <Text id="import-progress" as="p">Import progress</Text>
      <ProgressBar progress={60} tone="primary" ariaLabelledBy="import-progress" />
    </BlockStack>
  );
}
```

***