Spinner

An indicator that can be used to show a loading state.

Powered by

Shadcn UI

Installation

npx shadcn@latest add @redpanda/spinner

pnpm dlx shadcn@latest add @redpanda/spinner

yarn dlx shadcn@latest add @redpanda/spinner

bunx shadcn@latest add @redpanda/spinner

nubx shadcn@latest add @redpanda/spinner

aube dlx shadcn@latest add @redpanda/spinner

When to use

Use this decision tree to determine when to use the Spinner component:

Usage

import { Spinner } from '@/components/ui/spinner';

<Spinner />

Anatomy

The Spinner component is a simple animated loading indicator. Here’s how it’s structured:

<Spinner />  {/* Animated icon with spin animation */}

Layout Structure

• Spinner: Single SVG icon with animate-spin animation applied
• Size controlled via className (size-4, size-6, etc.)
• Color controlled by the finite tone recipe; the default inherits its surrounding control’s ink

Typical Usage Patterns

// Standalone<Spinner />
// Custom size<Spinner className="size-8" />
// Owned context color<Spinner tone="primary" />
// In button<Button disabled>  <Spinner />  Loading...</Button>
// In badge<Badge>  <Spinner className="size-3" />  Processing</Badge>
// In input group<InputGroup>  <InputGroupInput placeholder="Searching..." />  <InputGroupAddon>    <Spinner />  </InputGroupAddon></InputGroup>
// In empty state<Empty>  <EmptyHeader>    <EmptyMedia>      <Spinner className="size-8" />    </EmptyMedia>    <EmptyTitle>Loading data</EmptyTitle>  </EmptyHeader></Empty>
// In item<Item>  <ItemMedia>    <Spinner />  </ItemMedia>  <ItemContent>    <ItemTitle>Processing...</ItemTitle>  </ItemContent></Item>

Customization

Use the installed component’s tone recipe rather than copying a second spinner implementation or overriding its text color. If you change the glyph in the installed owner, preserve the finite tones, native SVG props, and role="status" accessibility contract.

Examples

Size

Use the size-* utility class to change the size of the spinner.

Color

Use tone for a supported context color. It does not change the pending state into a completed or failed operation. The default inherits the current color so spinners inside buttons and badges keep the correct foreground in both themes.

Button

Add a spinner to a button to indicate a loading state. The <Button /> will handle the spacing between the spinner and the text.

Badge

You can also use a spinner inside a badge.

Input Group

Input Group can have spinners inside <InputGroupAddon>.

Empty

Item

Use the spinner inside <ItemMedia> to illustrate a loading state. This example is a static download snapshot, not a live transfer. Its progress matches the displayed 129 MB out of 1000 MB; it has no pretend Cancel action.

API Reference

Spinner

Use the Spinner component to display a spinner.

<Spinner />

Props

Credits

• We take our inspiration from Shadcn UI for the spinner component and style.