Spinner
Indeterminate progress for a single action, like testing a connection. Takes the text colour.
Examples
Sizes
<Spinner size={12} />
<Spinner size={14} />
<Spinner />
<Spinner size={20} />With text
When nearby text already says it is busy, pass label={null} so it is not read twice.
Testing connection to Linear…
<Inline gap="2">
<Spinner label={null} />
<Text tone="ink-2">Testing connection to Linear…</Text>
</Inline>
<Button loading variant="secondary" icon="plug-zap">Testing…</Button>Usage
import { Spinner } from '@switchboard/ui'
<Spinner label="Refreshing tools" />Props
Every component also takes mix, for css() and mixins applied after its own style.
Spinner
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 12 | 14 | 16 | 20 | 16 | Diameter in px. |
| label | string | null | 'Loading' | Read by screen readers (role="status"). null hides it when a parent already says it is busy. |
Also accepts every <span> attribute.
Accessibility
- With a label it is role="status" with aria-label; with label={null} it is aria-hidden.
- It keeps spinning under prefers-reduced-motion (data-motion="essential"): it is the only sign of progress.
Guidance
Do
- Use it inside the control that started the work, via Button loading.
- Say what is happening in nearby text.
Don’t
- Spin a whole page or list; use Skeleton.
- Show more than one spinner for the same task.