Choose a version:

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.

Anchor to spinnerpropsSpinnerProps

Anchor to accessibilityLabel accessibilityLabel 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.
Anchor to appearance appearance Extract<, 'accent' | 'monochrome'> Default: 'accent': Sets the appearance (color) of the icon.
Anchor to id id string: A unique identifier for the component.
Anchor to size size Extract<, 'extraSmall' | 'small' | 'base' | 'large' | 'fill'> Default: 'base': Adjusts the size of the icon.

SpinnerProps

accessibilityLabel
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.
```
string
```
appearance
Sets the appearance (color) of the icon.
```
Extract<Appearance, 'accent' | 'monochrome'>
```
id
A unique identifier for the component.
```
string
```

size

Adjusts the size of the icon.

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

export interface SpinnerProps extends IdProps {
  /**
   * Adjusts the size of the icon.
   *
   * @defaultValue 'base'
   */
  size?: Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'fill'>;

  /**
   * Sets the appearance (color) of the icon.
   *
   * @defaultValue 'accent'
   */
  appearance?: Extract<Appearance, 'accent' | 'monochrome'>;

  /**
   * 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.
   */
  accessibilityLabel?: string;
}

Appearance

'base' | 'accent' | 'decorative' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome'

Size

'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'

Was this section helpful?

Basic Spinner

import {

reactExtension,

Spinner,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

return <Spinner />;

}

examples

Basic Spinner

React

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);
});

Preview

Anchor to appearanceAppearance

Value	Description
`"accent"`	Conveys emphasis and draws attention to the element.
`"monochrome"`	Takes the color of its parent.

Was this section helpful?

Anchor to relatedRelated

ComponentProgress