ProgressIndicator

Use this component to notify merchants that their action is being processed or loaded.

import {
  reactExtension,
  ProgressIndicator,
} from '@shopify/ui-extensions-react/admin';

reactExtension('Playground', () => <App />);

function App() {
  return (
    <ProgressIndicator size="small-200" />
  );
}

import {
  extension,
  ProgressIndicator,
} from '@shopify/ui-extensions/admin';

export default extension(
  'Playground',
  (root) => {
    const progressIndicator = root.createComponent(
      ProgressIndicator,
      {
        size: 'small-200',
      },
    );

    root.appendChild(progressIndicator);
  },
);

ProgressIndicatorProps

ProgressIndicatorProps

accessibilityLabel

A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. When set, any children or `label` supplied will not be announced to screen readers.

id

A unique identifier for the element.

size

The size of the component.

tone

Set the color of the progress indicator. - `inherit` will take the color value from its parent, giving the progress indicator a monochrome appearance.

variant

Style of the progress indicator

SizeScale

'small-300' | 'small-200' | 'small-100' | 'base' | 'large-100' | 'large-200' | 'large-300'

Related

• Button