Spinner

Pick a framework. Both use the same recipe, so the styling matches exactly.

Respects reduced motion.

Spinner props for React
Prop	Type	Default	Description
size	"sm" \| "md"	md	Diameter.
label	string	Loading	Screen reader text.

Also takes className and children. Anything else passes through to the span.

spinner.demo.tsx

import { Spinner } from "../react/index.js";

export default function SpinnerDemo() {
  return (
    <div className="flex items-center gap-6">
      <Spinner size="sm" />
      <Spinner size="md" />
      <span className="text-sm text-ink-secondary">
        Respects reduced motion.
      </span>
    </div>
  );
}

Respects reduced motion.

Spinner props for Svelte
Prop	Type	Default	Description
size	"sm" \| "md"	md	Diameter.
label	string	Loading	Screen reader text.

Also takes class and snippet children. Anything else passes through to the span.

spinner.demo.svelte

<script lang="ts">
  import { Spinner } from "../svelte/index.js";
</script>

<div class="flex items-center gap-6">
  <Spinner size="sm" />
  <Spinner size="md" />
  <span class="text-sm text-ink-secondary">Respects reduced motion.</span>
</div>