Spinner

Loading spinner

Edit the simple spinner code

<Spinner />

<Spinner />

Props
Link to this heading

<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 ...; white: CSSVarFunction; }, { ...; }>>	neutral11
ref	Ref<HTMLElement>	-
size	"small" \| "medium" \| "large"	medium

Sizes
Link to this heading

Edit the spinner sizes code

<Stack alignItems="center" direction="horizontal">
  <Spinner size="large" />
  <Spinner size="medium" />
  <Spinner size="small" />
</Stack>

<Stack alignItems="center" direction="horizontal">
  <Spinner size="large" />
  <Spinner size="medium" />
  <Spinner size="small" />
</Stack>

Colors
Link to this heading

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

Edit the spinner colors code

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

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

Edit on GitHub

Spinner

PropsLink to this heading

<Spinner>

SizesLink to this heading

ColorsLink to this heading

Accessibility labelLink to this heading

Props
Link to this heading

Sizes
Link to this heading

Colors
Link to this heading

Accessibility label
Link to this heading