Skip to the content
BooleanPress UI

Misc

Spinner

A turning icon that shows that something is working and the wait has no known length.

Import

import { Spinner } from "@booleanpress/ui/spinner"

Usage

A spinner is an icon: 16 px, in the current text colour, turning. Size and colour it with classes.

import { Button } from "@booleanpress/ui/button"
import { Spinner } from "@booleanpress/ui/spinner"

export function Sending() {
  return (
    <Button disabled>
      <Spinner />
      Sending
    </Button>
  )
}

Its accessible name comes from the provider's loading string ("Loading" in English), so a translated product needs no change in the component. Pass aria-label to say more: "Sending the test email". When a nearby text already says what is happening, as in the button above, the spinner's own name is read as well; to avoid repeating it, pass aria-hidden or aria-label="" for that use.

Use a spinner for a wait of unknown length, a progress bar for one you can measure, and a skeleton while a whole block loads.

Examples

Basic

The default 16 px spinner.

Sizes

Any size-* class sets the size; the colour follows text-*.

In a button

A spinner before the label of a disabled button.

Inline

A spinner beside a line of status text.

Checking the connection…

Accessibility

Semantics
An svg with role="status" and aria-label from strings.loading, so it is a polite live region with a name.
Labels
The provider's loading string. Override per use with aria-label.
Focus
A spinner takes no focus and has no keyboard behaviour, so it has no keyboard rows.
Known limits
  • A role="status" that is already on the page when it loads is not announced. Add the spinner when the wait starts, or put the message in a live region that exists already.
  • The turn is animate-spin. theme.css ends it under prefers-reduced-motion, so the icon then stands still: keep a text beside it that says the wait is on.

Keyboard

Keyboard
KeyBehaviour

API

Spinner

Renders a svg and passes it every other prop.

Every part takes className, merged with its defaults by cn(), and ref, which reaches the element it renders.

Data attributes: .

Provider strings: loading (BooleanUIProvider's strings).

Theming

The tokens its classes read. Change their values in your theme, and it follows.

Theme tokens
TokenUsed for