The Strum logo: two oscillating strings from an instrument next to the word Strum
Skip to content
GitHub

Spinner

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

Sizes
Link to this heading

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

<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