bx

Spinner

An indeterminate loading spinner.

tsx 
<div className="flex items-center gap-4">
  <Spinner />
  <Spinner size="h-6 w-6" />
  <Spinner size="h-8 w-8" />
</div>

Spinner is a circular indicator for indeterminate loading (the percentage is unknown). For a known percentage, use Progress. For a layout placeholder, use Skeleton.

Installation

Terminal 
$ bext ui add spinner

Usage

tsx 
import { Spinner } from "@bext-stack/ui/primitives"

<Spinner />
<Spinner size="h-6 w-6" />

Anatomy

<Spinner size="h-4 w-4" />

API Reference

Spinner

Prop Type Default Description
size string "h-4 w-4" Height and width utility classes, for example "h-6 w-6". There are no named sizes.
className string — Extra classes appended to the <svg>, for example a text color.

Accessibility

Spinner sets role="status" and aria-label="Loading" on its <svg>, so it is announced without extra markup. The label is fixed: when the spinner sits next to visible text that already says what is loading, wrap it in an element with aria-hidden="true" to avoid a double announcement.

← Sonner Switch →