Spinner
A turning ring for pending work, in three sizes; it stays still under reduced motion.
Loading
<Spinner size="lg" />Props
size
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/spinner.jsonThe CLI writes components/ikada/spinner.tsx and merges the ikada theme into your CSS. Or take it from the package: import { Spinner } from "@sproutboat/ikada";
Usage
import { Spinner } from "@/components/ikada/spinner";
<Spinner size="lg" />Examples
LoadingLoadingLoading
<Spinner size="sm" />
<Spinner />
<Spinner size="lg" />Deploying robin
<Spinner label="Deploying robin" /> Deploying
<div className="flex items-center gap-2 text-sb-sm text-fg-muted">
<Spinner decorative /> Deploying
</div><Button disabled aria-busy="true">
<Spinner decorative size="sm" /> Planting wren
</Button>Props
| Prop | Type | Description |
|---|---|---|
| label | string | What is loading. Announced politely; pass `decorative` when the parent already says it. Default `Loading`. |
| decorative | boolean | Hide from assistive tech (the button or region it sits in is already `aria-busy`). Default `false`. |
| size | "sm" | "md" | "lg" | null | — |
Also takes every prop of Omit<ComponentProps<"span">, "children">, VariantProps<typeof spinnerStyles>.
Source: src/components/spinner.tsx