---
title: Migrate to the Polaris spinner component
description: >-
  Learn how to migrate the Spinner component to Polaris web components in
  checkout and customer account UI extensions.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/spinner
  md: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/spinner.md
---

# Migrate to the Polaris spinner component

The Polaris spinner component displays an animated loading indicator for ongoing operations. It replaces the previous [`Spinner`](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/spinner) component and is available as [`<s-spinner>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/feedback-and-status-indicators/spinner) in API versions 2025-10 and newer.

***

## Updated properties

The following properties are different in the Polaris spinner component.

### size

The [`size`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/feedback-and-status-indicators/spinner#properties-propertydetail-size) prop values have changed to use a more consistent naming system.

| Previous value | New value | Migration notes |
| - | - | - |
| `'extraSmall'` | Removed | Use `'small'` or `'small-100'` for the smallest available size. |
| `'small'` | `'small'` or `'small-100'` | `'small'` is an alias for `'small-100'`. |
| `'base'` | `'base'` | No change needed. |
| `'large'` | `'large'` or `'large-100'` | `'large'` is an alias for `'large-100'`. |
| `'fill'` | Removed | Use `'large-100'` for the largest available size. |

For more on the scale system, see [Scale](https://shopify.dev/docs/api/checkout-ui-extensions/latest/using-polaris-components#scale).

## Migrating size values

##### Latest (Preact)

```tsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return <s-spinner size="small-100" accessibilityLabel="Loading..." />;
}
```

##### Pre-Polaris (2025-07)

```tsx
import {
  reactExtension,
  Spinner,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return <Spinner size="extraSmall" accessibilityLabel="Loading..." />;
}
```

***

## Removed properties

### appearance

The Polaris spinner component no longer supports `appearance`. The spinner automatically adapts its color based on context, so you don't need to set `appearance="monochrome"` for visual consistency.

## Migrating appearance

##### Latest (Preact)

```tsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return <s-spinner size="base" accessibilityLabel="Loading..." />;
}
```

##### Pre-Polaris (2025-07)

```tsx
import {
  reactExtension,
  Spinner,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Spinner
      appearance="monochrome"
      size="base"
      accessibilityLabel="Loading..."
    />
  );
}
```

***