Spinner

A spinner shows users that a task is running when its duration is unknown. It is a small rotating icon that takes the color of the text around it, so it matches the button or the badge that holds it. The spinner reports the role status and the label Loading to assistive technology, and aria-label replaces that label with the name of the task.

UsageCopy Anchor Link

import { Spinner } from "@biem/ui/components/ui/spinner";

export function SpinnerDefault() {
	return <Spinner/>;
}

ExamplesCopy Anchor Link

Custom LabelCopy Anchor Link

On a screen where several tasks run at once, a spinner that only reports "Loading" leaves users of a screen reader guessing which task it means. With aria-label, the spinner reports the name of its task instead, so these users know what they are waiting for.

In ButtonCopy Anchor Link

An action that saves or submits data can take a moment to complete, and a second press would start it twice. The spinner in the button confirms that the request is on its way, while disabled keeps the button from accepting another press as long as the task runs.

In BadgeCopy Anchor Link

Some processes continue in the background while users keep working, such as a supplier import or a recalculation of stock. Inside a badge, the spinner marks a status that is still in progress, so users see at a glance which items may still change and carry on with their work in the meantime.

API ReferenceCopy Anchor Link

Spinner shows a rotating icon while a task is running. It renders an svg and has no props of its own.