Spinner
An indeterminate ring for a wait with no known length. Sized in text units, so it fits wherever a glyph would.
API
Props
| prop | type | default | |
|---|---|---|---|
as? | ElementType | "span" | the element or component to render |
label? | string | "Loading" | the accessible name of the status |
className? | string | — | merged over the defaults, so it wins |
…rest | props of as | — | typed against the chosen element |
Examples
Usage
tsx
<Spinner />
<Spinner className="size-6" />
<Spinner className="size-8 text-primary" />Details
Size and colour
The ring is an inline SVG drawn in currentColor and filling its box, so it takes the colour of the text around it and the size you give the element. The default is size-4, the same square a Button icon occupies, which is what lets a spinner replace an icon without the control changing width.
tsx
<Button clickable={!isSaving} onClickBlur={handleSave}>
<Button.IconLabel
icon={<Button.Icon icon={<Swap.Boolean swapOn={isSaving} components={[MdSave, Spinner]} />} />}
label={<Button.Label label={isSaving ? "saving" : "save"} />}
/>
</Button>What it announces
It renders as role="status" with an accessible name, so assistive technology reports it as a live status rather than as a decorative image. Rename it when the page has more than one wait, or when saying what is loading is useful.
tsx
<Spinner label="Loading invoices" />