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.

Anchor to Choose the destinationChoose the destination

Anchor to Map indicator meaningMap indicator meaning

Anchor to Migrate the call siteMigrate 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.

Anchor to Preserve these behaviorsPreserve 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.

Anchor to Test and remove Polaris ReactTest 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.

Anchor to Migration exampleMigration example

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

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


export function IndicatorMigrationExample() {

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