Components Feedback
Spinner
StableAn indeterminate loading indicator with an accessible status label.
Use Spinner for short waits of unknown length, such as loading a list or saving. For longer operations with known progress use Progress, and for loading page structure use Skeleton. Buttons have a built-in `loading` state, so don’t put a Spinner inside a Button.
Overview
import { Spinner } from '@bindshq/stance-react';
export function Basic() {
return <Spinner />;
}Light, dark and high contrast
Every Stance component is designed and tested in all three appearance modes.
Import
import { Spinner } from '@bindshq/stance-react';Examples
import { Spinner } from '@bindshq/stance-react';
export function Sizes() {
return (
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
</div>
);
}With text
When visible text explains the wait, silence the spinner’s own label.
Syncing users from Microsoft 365…
import { Spinner, Text } from '@bindshq/stance-react';
export function WithText() {
return (
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }} role="status">
<Spinner size="sm" label={null} />
<Text size="sm" as="span" tone="muted">
Syncing users from Microsoft 365…
</Text>
</div>
);
}import { Button } from '@bindshq/stance-react';
export function InButton() {
return (
<Button loading loadingText="Deploying…">
Deploy
</Button>
);
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | 12, 16, 20 or 32px. |
label | string | null | 'Loading' | Status text announced; null when a parent announces state. |
Accessibility
- Exposes role="status" with an accessible label by default.
- Pass label={null} to hide it when nearby text already describes the wait.
- Rotation slows down, rather than stopping, under prefers-reduced-motion, so it still reads as loading.
Usage guidelines
Do
- Explain what is loading if it takes more than a second.
Don’t
- Show several spinners at once.