Spinner
An indeterminate loading indicator for buttons, panels and inline content.
- Feedback
- 1 file
- 1 npm package
- Accessibility notes
Loading
pnpm dlx @dowel-ui/cli add spinnernpm packages installed: class-variance-authority.
import { Spinner } from "@/components/ui/spinner";Default
Sizes
Inherits Colour
Inside AButton
<Spinner>
| Prop | Type | Default |
|---|---|---|
labelAnnounced to assistive technology while the spinner is visible. Omit it when the spinner sits inside a control that already communicates its busy state (a loading Button, for example) — announcing twice is worse than not announcing at all. | string | — |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" |
Plus every attribute of <svg> except children.
Renders aria-hidden by default so it does not announce inside controls that already expose a busy state. Pass `label` to announce it standalone via role="status".
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes