# Spinner A spinning ring that says something is loading. Screen readers hear its `label` as a status; with reduced motion it pulses instead of spinning. ```tsx import { Spinner } from "@/components/ouro/spinner/spinner"; ``` ## Example ```tsx ``` ## Use instead when - Use `Button`'s `loading` instead when the wait follows a press, `Progress` when you know how far along the work is, and `Skeleton` to hold the place of content that is loading. ## Props Type: `SpinnerProps`. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `className` | `string` | | Layout only: margins, alignment in a flex row (`ms-2`). Appearance classes warn in development; use `tone` and `size`. | | `label` | `string` | `"Loading"` | What is loading, for screen readers: "Loading recipes". It is not shown; put visible text next to the spinner when you want one. | | `ref` | `Ref` | | Reaches the rendered element. | | `size` | `"sm" \| "md" \| "lg"` | `"md"` | The spinner's size: 16px, 20px or 32px. To match running text, use `sm`. | | `tone` | `"primary" \| "secondary" \| "destructive" \| "success" \| "warning"` | | Color role from the theme, named after its token. Without a tone the spinner takes the surrounding text color, so it matches the button or text it sits in. `secondary` is the muted foreground. | ## Native attributes Also accepts the attributes in React's `HTMLAttributes` (`id`, `aria-*`, event handlers), passed to the rendered element, except those named on this page. ## Don't use These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix. - `color`: Not a prop. Ouro UI uses `tone`: ``. ## `className` is for layout only Pass margins, width and grid placement (`mt-4`, `w-full`, `col-span-2`). Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (`hover:`, `sm:`) and any `!` are removed, it starts with `bg-`, `text-`, `border-`, `rounded-`, `shadow-`, `font-`, `ring-`, `from-`, `via-`, `to-`, `fill-` or `stroke-`, or is `border`, `rounded`, `shadow` or `ring`, or has a `dark:` variant. Text wrapping, overflow and table layout classes (`text-wrap`, `text-ellipsis`, `border-collapse`) are layout and do not warn. Alignment classes (`text-center`) warn too: set alignment on a parent element.