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

# Migrate Indicator from Polaris React

Choose a badge for labelled state, an icon only when its meaning is already labelled, or visible text for the clearest status. Never preserve a color-only indicator.

***

## Choose the destination

| Polaris React | Polaris web components | Migration type |
| - | - | - |
| `Indicator` | `s-badge`, `s-icon`, or text that communicates the status | Compose |

***

## Map indicator meaning

| Polaris React usage | Polaris web components | Migration notes |
| - | - | - |
| Presence or status dot | `s-badge` with status text | State the status in words so color isn't the only signal. |
| Notification count | Text or badge content containing the count | Include an accessible label on the affected action. |
| `pulse` | No direct equivalent | Don't add motion only to copy the old appearance. |

***

## Migrate the call site

1. Identify each responsibility currently hidden behind `Indicator`: layout, semantics, state, actions, and responsive behavior.

2. Build the documented composition for those responsibilities; don't create a compatibility wrapper that accepts the old API.

3. Reconnect app state and verify the composition at every existing call site.

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

***

## Preserve these behaviors

* Information hierarchy, reading order, and accessible relationships.
* App-owned state and every action or navigation outcome.
* Responsive behavior and focus order across the composed elements.

***

## Test and remove Polaris React

Test the complete `Indicator` composition at each responsive size used by the app. Verify reading and focus order, accessible relationships, keyboard interaction, and every action outcome.

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 Indicator

##### Polaris web components

```tsx
export function IndicatorMigrationExample() {
  return (
    <><s-badge tone="info">Syncing</s-badge></>
  );
}
```

##### Polaris React

```tsx
import {Indicator} from '@shopify/polaris';


export function IndicatorMigrationExample() {

  return (
    <span style={{position: 'relative', display: 'inline-block'}}>
      Syncing
      <Indicator pulse />
    </span>
  );
}
```

***