A small brand-tinted spinner for in-flight work inside buttons, fields and panels.
Spinner is decorative unless given a label. Buttons and IconButtons show it themselves when loading.
Installation
npx shadcn@latest add KezLahd/rime/spinnerAlso installs: base.
Usage
import { Spinner } from "@/components/ui";
<Spinner label="Loading invoices" />Examples
Sizes
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Spinner
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 16 | Pixel size. 14 inside buttons, 16–20 inline, 24 for a panel. |
| tone | "brand" | "current" | "brand" | brand = accent on light surfaces; current = inherits text colour (buttons). |
| label | string | Announced to screen readers. Omit when the parent already says it is busy. | |
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
This component has no tokens of its own; it reads the system tokens below.
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --brand | tokens.css | … |
Accessibility
- With label it is wrapped in role="status" with the label as text; without, it is decorative.
Do and don't
Do
- Prefer skeletons for content that is loading.
Don't
- Don't spin a whole page; show its shape.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open spinner.md