# Spinner

Spinner is used to notify buyers that their action is being processed. The Spinner is usually used when sending or receiving data from a server.

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

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

function Extension() {
  return <Spinner />;
}

```

```js
import {extension, Spinner} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const spinner = root.createComponent(Spinner);

  root.appendChild(spinner);
});

```

## SpinnerProps

### SpinnerProps

### size

value: `Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'fill'>`

Adjusts the size of the icon.

### appearance

value: `Extract<Appearance, 'accent' | 'monochrome'>`

Sets the appearance (color) of the icon.

### accessibilityLabel

value: `string`

A label to use for the Spinner that will be used for buyers using
assistive technologies like screen readers. If will also be used to replace
the animated loading indicator when buyers prefers reduced motion. If not included,
it will use the loading indicator for all buyers.

### id

value: `string`

A unique identifier for the component.