Spinner

Composition preview

Try Spinner alongside its related feedback & loading components. These examples keep all actions local.

Usage

import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";

<>
<Button disabled aria-busy="true">
  <Spinner data-icon="inline-start" />Saving…
</Button>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

Standard SVG props; data-icon when composed in a button

Usage & accessibility

Pair with useful pending text. Use one meaningful live announcement for the operation.

Implementation contract

src/components/ui/spinner.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.