Back to Primitives

Spinner

1:1Feedback
View on GitHub

Loading indicator.

Example
Usage
import { Spinner } from '@/components/polaris';

function Example() {
    return <Spinner size="base" />;
}
Component Source
import { forwardRef, createElement } from 'react';

type SSpinnerProps = JSX.IntrinsicElements['s-spinner'];

export interface SpinnerProps {
    /** Label for assistive technologies */
    accessibilityLabel?: SSpinnerProps['accessibilityLabel'];
    /** Spinner size */
    size?: SSpinnerProps['size'];
}

/**
 * Spinner component - animated loading indicator.
 *
 *
 * @example
 * <Spinner accessibilityLabel="Loading products" />
 * <Spinner size="large" />
 */
export const Spinner = forwardRef<HTMLElement, SpinnerProps>((props, ref) => {
    return createElement('s-spinner', { ref, ...props });
});

Spinner.displayName = 'Spinner';