Progress
Use this component to notify merchants that their action is being processed or loaded.
Anchor to progressindicatorpropsProgressIndicatorProps
Anchor to size
size
required
The size of the component.
Anchor to accessibilityLabel
accessibilityLabel
string
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.
string
A unique identifier for the element.
Anchor to tone
tone
'inherit' | 'default'
Default: 'default'
Set the color of the progress indicator.
inheritwill take the color value from its parent, giving the progress indicator a monochrome appearance.
Anchor to variant
variant
"spinner"
Default: 'spinner'
Style of the progress indicator
Was this section helpful?
Simple spinner example
import {
reactExtension,
ProgressIndicator,
} from '@shopify/ui-extensions-react/admin';
reactExtension('Playground', () => <App />);
function App() {
return (
<ProgressIndicator size="small-200" />
);
}
Preview
