Spinner

Spinners help indicate that a surface's content or portion of content is currently loading.

Props

Name	Type	Default
`accessibilityLabel` Required	`string`	-
	String that clients such as VoiceOver will read to describe the element. Always localize the label.
`show` Required	`boolean`	`false`
`delay`	`boolean`	`true`
	Whether or not to render with a 300ms delay. The delay is for perceived performance so you should rarely need to remove it.
`size`	`"sm" \| "md"`	`"md"`
	sm: 32px, md: 40px

Usage guidelines

When to Use

When loading or updating content on a surface.

When Not to Use

To communicate that a UI element, such as a button, is performing an action that takes a perceptible amount of time. Contact us if this is needed.

Example

Spinners indicate when a user has to wait for something else to occur. They delay showing for 300ms to improve perceived performance.

The label on a spinner is for accessibility. You should pick labels that relate to the specific part of the product it's being used in ("Loading homefeed" for instance).

function SpinnerExample() {
  const [show, setShow] = React.useState(false);

  return (
    <Box>
      <Box paddingY={2}>
        <Button
          text={!show ? "Show spinner" : "Hide spinner"}
          onClick={() => setShow(!show)}
          size="md"
        />
      </Box>
      <Spinner show={show} accessibilityLabel="Example spinner" />
    </Box>
  );
}

function SpinnerExample() {
  const [show, setShow] = React.useState(false);
  return (
    <Box>
      <Box paddingY={2}>
        <Button
          text={!show ? "Show spinner" : "Hide spinner"}
          onClick={() => setShow(!show)}
          size="md"
        />
      </Box>
      <Spinner show={show} accessibilityLabel="Example spinner" />
    </Box>
  );
}

Edit page on GitHub