Spinner
Indicates a loading state using a spinning icon.
Loading
<Spinner />Usage
import { Spinner } from "@reva/ui";Examples
Size
Use the size prop to change the size of the spinner, or add a size-* Tailwind utility class for a custom size. <Spinner /> is the same as <Spinner size="default" />.
LoadingLoadingLoadingLoadingLoading
<HStack gap={6} align="center"> <Spinner size="sm" /> <Spinner /> <Spinner size="lg" /> <Spinner size="xl" /> <Spinner className="size-12" /></HStack>Custom styling
Pass className to change colour or motion (use size for footprint).
Loading
<Spinner className="text-fg-muted" />More examples (Button, Badge, Input Group, Empty, and other compositions) will be added later. For reference, see the shadcn docs: Spinner — Button.
Props
Spinner extends the Phosphor icon props (SVG) with size. The root is a role="status" wrapper span; the spinning icon inside it is decorative (aria-hidden).
| Prop | Type | Description |
|---|---|---|
size | "sm" | "default" | "lg" | "xl" | Maps to size-3, size-4, size-6, size-8. Omit size for default (size-4). |
className | string | Merged with cn() onto the wrapper; includes animate-spin and the size classes from size, so utilities like size-12 or text colours keep working. |
aria-label | string | Defaults to "Loading" — rendered as visually-hidden text inside the role="status" wrapper (not as an attribute), so screen readers announce the spinner when it appears. |
| … | — | Other Phosphor / SVG props are forwarded to the underlying icon. |