Spinner

Updated: May 9, 2025

Use Spinner to represent background loading states or async transitions in the interface.

Default

<Spinner />

Sizes

Available in five size options to match layout context.

Sizes

<Spinner size="xs" />
<Spinner size="s" />
<Spinner size="m" />
<Spinner size="l" />
<Spinner size="xl" />

Customize the ARIA label for screen readers.

ARIA label

<Spinner ariaLabel="Processing payment..." />

Prop	Type	Default
size Spinner size.	xllmsxs	m
ariaLabel What assistive tech announces while it turns.	string	Loading
className	string	—
style	React.CSSProperties	—
…and every FlexProps prop	inherited	—

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club