Spinner

Refer to the v3 Spinner documentation for complete API reference, styling guide, and advanced examples. This guide only focuses on migrating from HeroUI v2.

Structure Changes

In v2, Spinner supported multiple variants and labels:

import { Spinner } from "@heroui/react";

export default function App() {
  return <Spinner variant="default" label="Loading..." color="primary" />;
}

In v3, Spinner is simplified to a single circular variant:

import { Spinner } from "@heroui/react";

export default function App() {
  return <Spinner color="accent" />;
}

Key Changes

1. Component Behavior

v2: Supported multiple variants (default, simple, gradient, wave, dots, spinner) and labels
v3: Single circular spinner variant, no label support

2. Prop Changes

v2 Prop	v3 Location	Notes
`label`	—	Add label manually with separate element if needed
`variant`	—	Only one spinner variant available
`labelColor`	—	No label support
`classNames`	—	Use `className` prop directly
`size`	`size`	Changed: `"sm" \| "md" \| "lg"` → `"sm" \| "md" \| "lg" \| "xl"`
`color`	`color`	Changed values (see below)

3. Changed Color Values

"default" → "current" (inherits current text color)
"primary" → "accent"
"secondary" → Removed (use "current" or "accent")
"success", "warning", "danger" → Still available

Migration Examples

With Label

{/* Simple label */}
<Spinner label="Loading..." />

{/* With label color and custom styling */}
<Spinner
  label="Loading..."
  labelColor="primary"
  classNames={{
    label: "text-foreground mt-4"
  }}
/>

{/* Simple label */}
<div className="flex flex-col items-center gap-2">
  <Spinner />
  <span>Loading...</span>
</div>

{/* With custom styling */}
<div className="flex flex-col items-center gap-2">
  <Spinner />
  <span className="text-foreground mt-4">Loading...</span>
</div>

Sizes and Colors

{/* Sizes */}
<div className="flex gap-4">
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
</div>

{/* Colors */}
<div className="flex gap-4">
  <Spinner color="default" />
  <Spinner color="primary" />
  <Spinner color="secondary" />
  <Spinner color="success" />
  <Spinner color="warning" />
  <Spinner color="danger" />
</div>

{/* Sizes */}
<div className="flex gap-4">
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
  <Spinner size="xl" />
</div>

{/* Colors */}
<div className="flex gap-4">
  <Spinner color="current" />
  <Spinner color="accent" />
  <Spinner color="success" />
  <Spinner color="warning" />
  <Spinner color="danger" />
</div>

Variants (Removed)

<div className="flex gap-4">
  <Spinner variant="default" />
  <Spinner variant="simple" />
  <Spinner variant="gradient" />
  <Spinner variant="wave" />
  <Spinner variant="dots" />
  <Spinner variant="spinner" />
</div>

{/* Only one variant available - circular spinner */}
<Spinner />

{/* For other spinner styles, consider using CSS animations */}

Color Mapping

When migrating colors, use this mapping:

v2 Color	v3 Color	Notes
`"default"`	`"current"`	Inherits current text color
`"primary"`	`"accent"`	Use accent color
`"secondary"`	`"current"` or `"accent"`	Use current or accent
`"success"`	`"success"`	No change
`"warning"`	`"warning"`	No change
`"danger"`	`"danger"`	No change

Summary

No Label Support: label prop removed - add label manually if needed
No Variants: variant prop removed - only one circular spinner available
No Label Color: labelColor prop removed - style label manually
Color Values Changed: "default" → "current", "primary" → "accent", "secondary" removed
Size Added: New "xl" size option available
ClassNames Removed: Use className prop directly

On this page