Spinner

A lightweight loading spinner built on the Lucide Loader2Icon. It includes role="status" and an aria-label for accessibility, making it suitable as both an inline indicator and a standalone loading state.

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

export default function SpinnerDemo() {
  return <Spinner className="size-6" />
}

Anatomy

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

<Spinner />

Examples

Default spinner

<Spinner />

Custom size

Override the default size-4 with a custom class.

<Spinner className="size-6" />

Inside a button

<Button disabled>
  <Spinner />
  Loading...
</Button>

API Reference

Spinner

Renders an animated SVG spinner with role="status" and aria-label="Loading".

Prop	Type	Default	Description
`className`	`string`	—	Merged with the default `size-4 animate-spin` classes.

Accepts all standard SVG element attributes.