Spinner

Importing

import { Spinner } from '@customerio/pluma-components/react';

<Spinner />

Icon only

By default, the spinner component renders an inline-block element, which contains the rotating icon.

Loading label

Setting the shouldShowLoadingText prop to true will display a "Loading…" text next to the spinner:

<Spinner shouldShowLoadingText={true} />

<Spinner shouldShowLoadingText={true} label="Please wait" />

Color

The spinner's color can be customized with the color prop, which accepts a text color token name (similar to the Text component), for example:

<Spinner color="accent" />

The color can also be set to inherit, in which case the spinner will inherit the current text color. This is useful in situations where we want the spinner color to match the text, for example:

<Button variant="primary">
	<Spinner color="inherit" /> Saving…
</Button>