Components
Spinner
A continuously spinning indicator that signals an in-progress operation when the wait time is short or indeterminate.
Basic usage
Drop in a Spinnerwith no props for the default 16 px spinner that inherits the current text color.
Sizes
Scale the spinner with any Tailwind size-* utility — it overrides the default size-4.
Color
The spinner stroke uses currentColor, so any text-* utility recolors it.
Inside a button
Pair the spinner with a disabled Button to communicate a pending action.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | 'size-4' | Tailwind classes merged onto the icon. Use size-* to scale and text-* to recolor; the default applies size-4 plus animate-spin. |
role | string | 'status' | ARIA role announced to assistive technology. Overridable via props. |
aria-label | string | 'Loading' | Accessible name read by screen readers. Override to describe the specific operation. |
...rest | React.ComponentProps<'svg'> | — | All native SVG attributes are forwarded to the underlying icon. |
Accessibility
- The spinner ships with
role="status"so assistive technology announces it as a live status region. - A default
aria-label="Loading"gives the icon an accessible name; override it to describe the specific task (e.g.aria-label="Saving changes"). - When the spinner sits next to visible text inside a button or label, add
aria-hiddento avoid a redundant announcement. - The spin animation respects the user's
prefers-reduced-motionsetting through Tailwind's motion utilities.