Spinner

A loading spinner component for indicating progress.

Basic Usage

Sizes

With text

Button loading state

SpinnerLoading spinner indicator

pnpm add @corew500/ui

import { Spinner } from "@mordecai-design-system/ui"

<Spinner />

The spinner uses Tailwind size classes:

<Spinner className="size-3" />
<Spinner className="size-4" />
<Spinner className="size-6" />
<Spinner className="size-8" />

<div className="flex items-center gap-2">
  <Spinner />
  <span>Loading...</span>
</div>

<Button disabled>
  <Spinner className="mr-2" />
  Please wait
</Button>

Spinner accepts all standard SVG element props. Use className to control size.

<Spinner className="size-4" />  // Small (default)
<Spinner className="size-6" />  // Medium
<Spinner className="size-8" />  // Large

The Spinner component includes: