Spinner

GradeTested

UsageCopy Anchor Link

import { Spinner } from "@cadence-clinical/ui";

<Spinner aria-label="Loading results" />;

Spinner follows the shadcn Spinner. It is an svg and accepts all of its props.

To hold the place of content while it loads, pair a spinner that says what is loading with a Skeleton in the content's shape.

In a pending buttonCopy Anchor Link

Button has no loading prop. Compose it: disable the button, put a spinner where the icon goes, and say what is happening in the label. Hide the spinner from assistive technology, because the label already announces it.

<Button disabled>
  <Spinner aria-hidden data-icon="inline-start" />
  Saving
</Button>

What Cadence changesCopy Anchor Link

• Its size follows the density: 16px compact and 20px comfortable, like any icon in a control.
• It fades in and out instead of turning when the user asks for reduced motion, so it still shows that something is happening.

AccessibilityCopy Anchor Link

• On its own a spinner is a status named "Loading". Pass aria-label to name it in your users' language and to say what is loading.
• Beside text that already says what is happening, pass aria-hidden.