Spinner

Spinner is a self-contained SVG indicator. The strokes use currentColor, so when color is omitted it inherits the surrounding text color — that's how Button and ActionIcon embed it without extra plumbing. Pass color for standalone use to route through the kit's slot vars.

import { Spinner } from '@42/ui-react/spinner';

<Spinner color="brand" size="lg" />
<Spinner label="Syncing" color="green" size="md" />

Playground

<Component  label="Loading"  color="brand"  size="xs"/>

Full prop browser

Inheritance vs explicit

When used inside a container that already drives text color and SVG size (Button / ActionIcon), omit both color and size — Spinner picks them up via CSS inheritance.

{/* Inside Button — Spinner inherits text color + Button's [&_svg]:size-* rule. */}
<Button isLoading>Saving</Button>

{/* Standalone — set explicit size + color via the slot vars. */}
<Spinner size="lg" color="brand" />

Sizes

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

Accessibility

label controls the screen-reader announcement:

• Default (label="Loading"): emits role="img" + an <svg><title> — screen readers announce "Loading".
• Custom: pass any string for a more specific phrase ("Syncing", "Submitting form").
• Decorative (label={null}): marks the SVG aria-hidden and skips the title. Use when a parent already broadcasts the busy state (e.g. Button's aria-busy="true" covers any embedded spinner).

<Spinner label="Syncing your library" color="green" />

{/* When the parent has aria-busy, mark the spinner decorative. */}
<Button isLoading>Saving</Button>
{/* Button internally renders <Spinner label={null} /> */}

API

All other props are forwarded to the underlying <svg>.