Spinner

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/spinner

Installing Button also installs Spinner, which it uses for its loading state.

UsageCopy Anchor Link

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

<Spinner />;

Size and colorCopy Anchor Link

Spinner is a Lucide icon, so set its size with size-* classes and its color with text-* classes. It uses the current text color by default.

AccessibilityCopy Anchor Link

Spinner has role="status" and aria-label="Loading", so screen readers announce it. Pass a more specific aria-label when it helps, like aria-label="Loading messages".

When visible text already says what's loading, hide the spinner from screen readers so it isn't announced twice:

API referenceCopy Anchor Link

Also accepts every Lucide icon prop and SVG attribute.