Primary Color Spinner for React

Pass text-primary on Spinner. The icon draws with currentColor, so the text class paints the stroke. This file sets that class and nothing else.

Yes. text-primary reads the same token as primary text elsewhere, including in light and dark mode. Change the token and this spinner follows.

It stays at the default size-4 (16px). Add size-3, size-6, or size-8 on the same element to resize it. The color class stays put.

Put the Spinner in the Button with data-icon set to inline-start, and disable the button while the work runs. A filled button already sets its own text color, so the spinner picks that up through currentColor. Add text-primary when the spinner sits outside a button, as this file does.

No. The spinner still has role="status" and an aria-label of Loading. Pass your own aria-label to name the work, and keep a visible label when the wheel is the only cue.

The spin is animate-spin. Add motion-reduce:animate-none beside text-primary and the icon stays still. The status role and the label stay.