Feedback

Spinner

A loading indicator with a screen-reader label.

StableUsed in Aback Tools, Aback LaunchRegistry JSON

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add spinner

Writes components/ui/spinner.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

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

Props and composition points for Spinner. Native element props pass through.

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	"md"	16, 20, or 24 pixel indicator.
`label`	`string`	"Loading"	Screen-reader text. Make it specific: Saving, Deploying, Loading invoices.
`className`	`string`	None	Color and layout adjustments, for example text-primary-foreground in a button.

Dependencies: @tabler/icons-react, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

Renders role status with a visually hidden label, so the loading state is announced.
Use a specific label. Generic Loading gives no useful context.
Inside a button, keep the visible verb and disable the button while the action runs.
Do not animate indefinitely after a failure; replace the spinner with a message.

The Aback products whose interfaces shaped this component.