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 a palette color for standalone use to route through the kit's slot vars.

Two non-palette values round out the prop: "currentColor" is the explicit, named form of the inherit behavior, and "default" paints the neutral high-contrast stroke that matches Button's default variant.

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

<Spinner color="brand" size="lg" />
<Spinner label="Syncing" color="green" size="md" />
<Spinner color="default" size="lg" />        {/* matches Button's default variant */}
<Spinner color="currentColor" size="lg" />   {/* explicit inherit */}

Playground

<Component size="xl" label="Loading" />

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.

<Button color="brand" isLoading>Saving</Button>  <Button color="green" variant="light" isLoading>Syncing</Button>  <Button color="red" variant="outline" isLoading>Deleting</Button>

Sizes

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

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>.