Build / Atoms

Spinner

atom
play-fn

An indeterminate loading indicator.

import { Spinner } from '@meetcard/deck'

Example

<Spinner label="Syncing to CRM" />

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

Default

Source

const Default = () => <Spinner />;

Every size. sm inside a button, md in a panel, lg for a whole view.

Sizes

Source

const Sizes = () => <Stack direction="row" gap={16} align="center">
    <Spinner size="sm" label="Loading small" />
    <Spinner size="md" label="Loading medium" />
    <Spinner size="lg" label="Loading large" />
</Stack>;

Named for the wait, so a screen reader hears what is happening, not only that something is.

With Context Label

Source

const WithContextLabel = () => <Spinner label="Syncing to CRM" />;

When visible text already describes the wait, silence the spinner so a screen reader doesn't announce it twice.

Silent

Source

const Silent = () => <Stack direction="row" gap={8} align="center">
    <Spinner label={null} size="sm" />
    <span>Syncing to CRM…</span>
</Stack>;

Props

Prop	Type	Default	Description
`label`	`string \| null`	`'Loading'`	Announced to assistive tech. Set to `null` when a visible label already describes the wait, so screen readers don't hear it twice.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	—

Also accepts everything from HTMLAttributes, so id, data-* and event handlers pass straight through.