feedback / stable

Spinner

Indeterminate activity indicator for buttons and tiny inline waits.

LIVE PREVIEW

Loading preview…

When to use

Inside a Button while its action runs — pass `loading` to Button instead of placing one yourself.
A tiny inline wait next to a value that is refreshing.

Page or panel loading — use Skeleton (layout-shaped placeholders) and the top progress bar.
Progress you can measure — use a progress bar with a value.

import { Spinner } from '@revido-llc/kit';

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


label	string	"Loading"	Accessible name. Pass "" when a visible label already explains the wait.
size	"sm" \| "md" \| "lg"	"md"	`sm` 14px (inside buttons), `md` 16px, `lg` 24px.
children	ReactNode	—
className	string	—

sm (14px) sits inside buttons; md (16px) inline; lg (24px) only in empty panels that wait on a single fetch.

<Spinner size="sm" />
<Spinner />
<Spinner size="lg" />

Button owns its spinner: `loading` keeps the width and blocks presses.

<Button loading>Saving</Button>

When visible text explains the wait, pass `label=""` so screen readers do not hear it twice.

<span className="inline-flex items-center gap-1.5">
  <Spinner size="sm" label="" /> Syncing with Xero…
</span>