Spinner

<Spinner size="xs" /><Spinner size="sm" /><Spinner size="base" /><Spinner size="lg" /><Spinner size="xl" />

The glyph is eight discrete spokes, so it ticks from one to the next rather than rotating smoothly — a smooth rotation smears them into a grey ring. It is the same motion the rest of the system uses for "working on it", at every size.

Usage

import { Spinner } from "@heyo-sh/heyo-ui";<Spinner size="sm" label="Loading deployments" />;

In context

Most of the time you do not render a spinner directly: Button has loading, Command has loading, and DataTable draws skeleton rows. Use it on its own when something is loading that is not a control.

<Button loading>Deploying</Button><div className="flex items-center gap-2 text-sm text-heyo-subtle"><Spinner size="sm" />Checking the build…</div>

Accessibility

label is rendered visually hidden and announced to screen readers. Give it one whenever the spinner is the only indication that something is happening — "Loading" on its own is better than silence, and "Loading deployments" is better than that.

Properties