Spinner
Loading spinner
<Spinner />
PropsLink to this heading
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 |
SizesLink to this heading
Link to this heading
<Stack alignItems="center" direction="horizontal"><Spinner size="large" /><Spinner size="medium" /><Spinner size="small" /></Stack>
ColorsLink to this heading
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 labelLink to this heading
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>