Spinner

Install

Pull Spinner from the barrel for everyday use, or the granular path when you want a tighter bundle.

import { Spinner } from "@brika/clay";

import { Spinner } from "@brika/clay/components/spinner";

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

import { Spinner } from '@brika/clay/components/spinner';

/** Bare spinner, decorative by default and marked `aria-hidden`. */
export default function SpinnerDefaultDemo() {
  return <Spinner />;
}

Spinner, every way

import { Button } from '@brika/clay/components/button';
import { Spinner } from '@brika/clay/components/spinner';

/** Compose the spinner inside a disabled button to communicate an in-flight action. */
export default function SpinnerInButtonDemo() {
  return (
    <Button disabled>
      <Spinner />
      Loading
    </Button>
  );
}

import { Spinner } from '@brika/clay/components/spinner';

/** All three sizes side by side, `sm` (0.875rem), `default` (1rem), and `lg` (1.25rem). */
export default function SpinnerSizesDemo() {
  return (
    <div className="flex items-center gap-4">
      <Spinner size="sm" />
      <Spinner />
      <Spinner size="lg" />
    </div>
  );
}

import { Spinner } from '@brika/clay/components/spinner';

/**
 * Pass `label` to wrap the spinner in a `role="status"` element with an sr-only string for screen readers.
 */
export default function SpinnerWithLabelDemo() {
  return <Spinner label="Loading…" />;
}

Accessibility

• › Decorative spinners must set aria-hidden="true" so screen readers skip them, Clay applies this automatically when no label is provided.
• › Spinners that convey loading state should pass a label, the wrapper renders role="status" with a visually hidden (sr-only) label so AT users hear the state.
• › When pairing a visible loading text next to the spinner, keep the spinner aria-hidden and let the visible text carry the announcement.

Theme tokens

Every CSS variable Spinner reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Spinner without touching component code.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.spinner, the names are camelCase versions of the variable suffix.

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "spinner": {
      "color": "currentColor"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-spinner-…) — see the chips on each token row.

API reference

Props specific to Spinner. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.