Default Spinner for React

Use the default for most loading states, so every wait in the app looks the same. Change the size when the spinner sits in dense text (size-3) or alone in an empty area (size-8), and the color when it should step back (text-muted-foreground) or carry the brand (text-primary).

It is size-4, 16px, the same as the other icons in buttons and body text. size-3 (12px) fits small inline status, size-6 (24px) a card, and size-8 (32px) a page or panel. There is no size prop: pass the class.

It draws with currentColor, so it takes the text color of its parent. Set a text class on it or on the parent, such as text-muted-foreground, text-primary or text-destructive.

Put it in a flex container with items-center and justify-center, sized to the area it covers: min-h-48 for a panel, or fixed inset-0 for a full-screen overlay. The spinner itself has no position.

Yes. It renders with role="status" and an aria-label of "Loading", so assistive technology announces it. Pass your own aria-label, such as "Loading messages", to say what is loading.

The spin comes from animate-spin on the icon. Add motion-reduce:animate-none and it stays still for people who ask for less motion. The role and the aria-label stay, so it still announces Loading.