Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Spinner

Version 14.1.1GithubStorybook

A Spinner is an animation that communicates a loading state to users.

Installation

Installation page anchor
yarn add @twilio-paste/spinner - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {Spinner} from '@twilio-paste/core/spinner';

const Component = () => {
  return <Spinner decorative={false} title="Loading" />;
};

Props

Props page anchor

Spinner

Spinner page anchor

decorative RequiredRequired

Whether or not the SVG is just visual flair or adds meaning to the page. Specifically for screenreaders to know whether to read out the title or not.

Type
boolean

as

Sets the HTML element the IconWrapper renders as.

Type
keyof IntrinsicElements
Default
span

color

Sets the color of the icon.

Type
"colorText" | "colorTextBrand" | "colorTextBrandHighlight" | "colorTextBrandInverse" | "colorTextDecorative10" | "colorTextDecorative20" | "colorTextDecorative30" | "colorTextDecorative40" | ... 57 more ... | { ...; }
Default
currentColor

delay

Time delay in milliseconds of the animation.

Type
number

display

Sets the display of the icon.

Type
| Display | (Display | null | undefined)[] | { [x: string]: Display | undefined; [x: number]: Display | undefined }
Default
block

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
SPINNER

size

Sets the size of the icon.

Type
"sizeIcon05" | "sizeIcon10" | "sizeIcon20" | "sizeIcon30" | "sizeIcon40" | "sizeIcon50" | "sizeIcon60" | "sizeIcon70" | "sizeIcon80" | "sizeIcon90" | "sizeIcon100" | "sizeIcon110" | ("sizeIcon05" | ... 11 more ... | null)[] | { ...; }
Default
sizeIcon30

title

The accessibility text that is read when screenreaders get to this component.

Type
string