import { Canvas, Meta } from "@storybook/blocks";

import * as SpinnerStories from "./Spinner.stories"; import { ButtonLoadingStory } from "../Button/Button.stories";

<Meta of={SpinnerStories} />

Spinner

The spinner is a special implementation of an icon-only button that is used as a visual cue to indicate information being loaded on to the screen or to communicate that the system is processing information.

<Canvas of={SpinnerStories.SmallSpinnerStory} />

Anatomy

1. Icon: Indicates the loading action; it is available in either a medium (md) or large (lg) size

Spacing

The spinner follows the exact same spacing of an icon-only button. See Icon Buttons

Size

Spinners are available in 3 sizes: small (sm), medium (md) and large (lg).

Small

<Canvas of={SpinnerStories.SmallSpinnerStory} />

Medium

Use a medium spinner to indicate when content is loading within smaller areas, such as panels, modals, and form controls. They are also ideal for areas with limited space.

<Canvas of={SpinnerStories.MediumSpinnerStory} />

Large

Use a large spinner to indicate when content is loading within larger areas, such as full-page views, large panels, and modals. They're also ideal for any areas that don't have space constraints.

<Canvas of={SpinnerStories.LargeSpinnerStory} />

Usage

1. Use a spinner whenever the wait time is anticipated to be longer than three seconds.
2. Don't use a spinner when the action has occured after a button has been clicked, use the button's isLoading prop for this. <Canvas of={ButtonLoadingStory} />