Spinner

An indicator for loading states. Uses logical data-icon="inline-start" / inline-end so placement follows writing direction in buttons and badges.

A compact loading indicator with role="status".

Installation

CLI

npx @sonojs/ui@latest add spinner

Also needsnpm i lucide-react

structure

Spinner

spinner.tsx

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

export function Example() {
  return <Spinner />
}

Prop	Type	Default	Description
className	string	—	Merge classes (e.g. `size-6` for a larger spinner).
aria-label	string	"Loading"	Accessible name for the status role.
…svg props	React.ComponentProps<"svg">	—	Pass-through props for the Lucide icon.