Skip to content

Spinner

Proposed

A 14px arc that inherits currentColor. It fits inside a Button, a Status or a table cell without a wrapper.

@varick/ui/components/spinnerAdded 2 Sept 2026

Queued

Usage

import { Spinner } from "@varick/ui/components/spinner";

export function Example() {
  return <Button disabled><Spinner /> Syncing</Button>;
}

API reference

Every component also accepts className and the native props of its root element.

PropTypeDefaultDescription
classNamestringundefinedSize and colour. Defaults to 14px, currentColor.

Accessibility

  • role="status" with aria-label="Loading". Inside a Button prefer the loading prop, which also sets aria-busy.

Styles

Proposed CSS in Varick tokens. Nothing in the app renders this yet.

.spinner {
  width: 14px; height: 14px;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }