Skip to content

Spinner

An indeterminate loading indicator. It takes the text color, and stops rotating under reduced motion.

Sourcecomponents/spinner.tsx

Sizes

Loading (small)Loading (medium)Loading (large)Syncing…

Inside a Button (use loading, not a Spinner child)

Usage

Spinner usage
import { Spinner } from "@/components/spinner";
export function SpinnerUsage() {  return (    <div className="flex items-center gap-2 text-text-secondary">      <Spinner label="Loading comments" />      <span aria-hidden>Loading comments…</span>    </div>  );}

When to use

Use when

Waiting for something with no known duration

Don’t use when

Page-level loading where the layout is known; use a skeleton. Inside a Button, use loading