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.
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.
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 />;
}
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?
