Import

import { Spinner } from '@contentful/f36-components';
// or
import { Spinner } from '@contentful/f36-spinner';

Examples

Variants

function SpinnerVariantsExample() {
  return (
    <Stack flexDirection="column">
      <Spinner variant="default" />
      <Spinner variant="primary" />
      <div style={{ background: 'black', padding: '5px' }}>
        <Spinner variant="white" />
      </div>
    </Stack>
  );
}

Open in Playground

Sizes

function SpinnerSizesExample() {
  return (
    <Stack flexDirection="column">
      <Spinner size="medium" />
      <Spinner size="small" />
      <Spinner size="large" />
      <Spinner customSize={50} />
    </Stack>
  );
}

Open in Playground

With text

It’s possible to use the Spinner with other elements. A very common pattern is using it together with text.

Another good example of the Spinner being used with other components is the loading state of Button component.

function SpinnerWithTextExample() {
  return (
    <Stack flexDirection="column">
      <Flex>
        <Text marginRight="spacingXs">Loading</Text>
        <Spinner />
      </Flex>
      <Button isLoading isDisabled>
        Submitting
      </Button>
    </Stack>
  );
}

Open in Playground

Props (API reference)

Open in Storybook

Name	Type	Default
className	string CSS class to be appended to the root element
customSize	number Allows resizing the spinner with any N value. The final size will be NxN pixels
size	"small" "large" "medium" Controls the size of the spinner. The default `medium` size is 20px wide, the `small` size is 14px wide, and the `large` size is 36px wide	medium
testId	string A [data-test-id] attribute used for testing purposes	cf-ui-spinner
variant	"primary" "default" "white" Determines the color that will be used in the `fill` property of the SVG	default

Import

Examples

Variants

Sizes

With text

Props (API reference)

Name

Type

Default

Help improve this page