Spinner

UsageCopy Anchor Link

import { Spinner } from '@vitnode/core/components/ui/spinner'

<Spinner size="lg" className="text-primary" />

It takes the text color around it, so a color change is one text-* class.

In buttonsCopy Anchor Link

Prefer isLoading on Button. It swaps the label for a spinner, disables the button and announces "Loading". Add a Spinner by hand to keep the label visible.

<Button disabled>
  <Spinner aria-hidden="true" />
  Uploading...
</Button>

In badges, inputs and textCopy Anchor Link

<InputGroupAddon align="inline-end">
  <Spinner aria-label="Searching" />
</InputGroupAddon>

Loading statesCopy Anchor Link

Put it in an Empty state, or over a card that's refreshing. For a Suspense fallback, center an xl spinner, like the AdminCP does.

<Suspense
  fallback={
    <div className="flex items-center justify-center">
      <Spinner size="xl" />
    </div>
  }
>
  <SlowThing />
</Suspense>

Know what's coming? A Skeleton of that shape usually feels faster.

AccessibilityCopy Anchor Link

• A spinner has role="status" and the label "Loading", translated. Pass aria-label for something specific, like "Searching".
• If nearby text already says what's happening, add aria-hidden="true" so screen readers don't hear it twice.
• Mark the loading container with aria-busy="true".

PropsCopy Anchor Link