Spinner

Loading spinner
<Spinner />

<Spinner>

import { Spinner } from '@strum/react';
name
type
default
accessibilityLabel
string
Loading
color
ConditionalStyle<Values<{ warning1: CSSVarFunction; warning2: CSSVarFunction; warning3: CSSVarFunction; warning4: CSSVarFunction; warning5: CSSVarFunction; ... 68 more ...; current: CSSVarFunction; }, { ...; }>>
neutral11
ref
Ref<HTMLElement>
-
size
"small" | "medium" | "large"
medium
<Stack alignItems="center" direction="horizontal">
<Spinner size="large" />
<Spinner size="medium" />
<Spinner size="small" />
</Stack>

A spinner will normally inherit its color from the parent text, but you can override it with any available color token.

<Stack direction="horizontal">
<Spinner color="accent11" />
<Spinner color="error11" />
<Spinner color="warning11" />
<Spinner color="success11" />
</Stack>

Accessibility label
Link to this heading

The spinner includes an accessibilityLabel to provide meaning for screen readers. The label defaults to Loading, but can be overriden if you want something more specific.

<Stack direction="horizontal">
<Spinner accessibilityLabel="Generating your report" />
</Stack>