# Spinner
**Category**: react
**URL**: https://www.heroui.com/docs/react/migration/spinner
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/spinner.mdx
> Migration guide for Spinner from HeroUI v2 to v3
***
Refer to the [v3 Spinner documentation](/docs/react/components/spinner) 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:
```tsx
import { Spinner } from "@heroui/react";
export default function App() {
return ;
}
```
In v3, Spinner is simplified to a single circular variant:
```tsx
import { Spinner } from "@heroui/react";
export default function App() {
return ;
}
```
## 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
```tsx
{/* Simple label */}
{/* With label color and custom styling */}
```
```tsx
{/* Simple label */}
Loading...
{/* With custom styling */}
Loading...
```
### Sizes and Colors
```tsx
{/* Sizes */}
{/* Colors */}
```
```tsx
{/* Sizes */}
{/* Colors */}
```
### Variants (Removed)
```tsx
```
```tsx
{/* Only one variant available - circular 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
1. **No Label Support**: `label` prop removed - add label manually if needed
2. **No Variants**: `variant` prop removed - only one circular spinner available
3. **No Label Color**: `labelColor` prop removed - style label manually
4. **Color Values Changed**: `"default"` → `"current"`, `"primary"` → `"accent"`, `"secondary"` removed
5. **Size Added**: New `"xl"` size option available
6. **ClassNames Removed**: Use `className` prop directly