Small Spinner for React

Spinner defaults to size-4 (16px). This file passes size-3, which sets the width and height to 12px. Size is that class.

The stroke is currentColor, so it takes the text color around it. This file sets only the size. Add text-muted-foreground or text-primary on the same Spinner when the color should change too.

text-sm or text-xs lines up with a 12px icon. Put both in a flex row with items-center and gap-2, and keep the spinner at size-3.

Yes. On a Button with size="sm", pass size-3 on the Spinner and set data-icon to inline-start so the button's icon spacing applies. Disable the button so it can't be pressed again.

The spinner has role="status" and an aria-label of Loading, at any size. Pass your own aria-label, such as "Saving", when Loading is too vague. A visible word next to the icon says the same thing in text.

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