Skip to content

Spinner

A turning ring with a label, for a wait of unknown length.

Checking stock

import { Spinner } from '@brand-studio/ui';

export default function SpinnerDemo() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 32 }}>
      <Spinner label="Checking stock" />
      <Spinner size={32} label="Loading orders" hideLabel />
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, Spinner } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { Spinner } from '@brand-studio/ui';

<Spinner label="Checking stock" />

Accessibility

The label sits in a role="status" region. hideLabel keeps it for screen readers only.
Under reduced motion the ring stops turning and the label carries the meaning.
Use Skeleton when you know the shape of what is loading, and Button's loading prop for a pressed button.

API Reference

Prop	Type	Default
`label?`	`string`	`'Loading'`
`hideLabel?`	`boolean`	`false`
`size?`	`number`	`20`
`className?`	`string`	`''`