Spinner

Default

import { Spinner } from '@eekodigital/raster';

<Spinner />

Sizes

Three sizes: sm (1rem), md (1.5rem, default), lg (2rem).

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />

Inline with text

Pair sm with text for inline loading states, e.g. inside a button or form feedback.

Saving changes…

<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
  <Spinner size="sm" />
  <span>Saving changes…</span>
</div>

Accessibility

The spinner renders as role="status", which is an implicit ARIA live region. Screen readers will announce the aria-label (“Loading” by default) when the spinner mounts. Provide a descriptive label when context matters: label="Submitting form".

Props

Prop	Type	Default	Description
size	”sm” | “md” | “lg"	"md”	Controls the diameter of the spinner.
label	string	”Loading”	Accessible label announced by screen readers.
className	string	—	Additional CSS classes.