Spinner

import { Spinner } from '@elirobinson/react/components/atoms/Spinner';

import { Spinner } from '@elirobinson/react/components/atoms/Spinner';

export default function Basic() {
  return <Spinner />;
}

When to use it

Use Spinner for a small, indeterminate "working" indicator — you don't know how long it'll take. Use Progress instead the moment you actually know the percent complete.

Sizes

import { Spinner } from '@elirobinson/react/components/atoms/Spinner';

export default function Sizes() {
  return (
    <div className="demo-row">
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
    </div>
  );
}

Inside a button

A common pattern: a disabled button showing its own loading state.

import { Button } from '@elirobinson/react/components/atoms/Button';
import { Spinner } from '@elirobinson/react/components/atoms/Spinner';

export default function InButton() {
  return (
    <Button disabled>
      <Spinner size="sm" aria-hidden="true" />
      Saving changes
    </Button>
  );
}

Props

Accessibility

• Renders role="status" with aria-label={label} (default "Loading") — a live region announced once when it mounts. role is fixed: the type omits it from the props you can pass, so you can't accidentally break the live region.
• When adjacent visible text already says the same thing — a "Saving changes" button, for example — pass aria-hidden="true" on the Spinner so the two don't both get announced, as in the button demo above.
• Give it a specific label when the default "Loading" isn't precise enough ("Loading invoices") and no visible text nearby already says so.

Related