---
title: Spinner
description: A compact status mark for work in progress.
group: Components
order: 63
---
A small status mark for pending work. Use it on its own, in a card, or inside a button or badge.
```tsx
import { Card, CardContent } from "@/components/ui/card"
import { Spinner } from "@/components/ui/spinner"
export function Example() {
return (
Processing payment…
$100.00
)
}
```
## Installation
```bash
npx @arctis-sh/@arctis-sh/ui@latest add spinner
```
## Usage
```tsx
import { Spinner } from "@/components/ui/spinner"
```
```tsx
```
## Customization
Replace the SVG inside `Spinner` with your own mark. Keep `role="status"`, an `aria-label`, and `animate-spin`.
```tsx
import { cn } from "@/lib/utils"
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
return (
)
}
export function Example() {
return
}
```
## Size
Size it with utility classes like `size-3`, `size-4`, `size-6`, or `size-8`.
```tsx
import { Spinner } from "@/components/ui/spinner"
export function Example() {
return (
<>
)
}
```
## Button
Use `Button`’s `loading` prop, or drop in a `Spinner` with `data-icon="inline-start"` or `data-icon="inline-end"`.
```tsx
import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"
export function Example() {
return (
<>
)
}
```
## Badge
Use the same pattern in a `Badge` for a compact in-progress status.
```tsx
import { Badge } from "@/components/ui/badge"
import { Spinner } from "@/components/ui/spinner"
export function Example() {
return (
<>
Syncing
Updating
Processing
)
}
```
## API Reference
### Spinner
| Prop | Type | Default |
| --- | --- | --- |
| className | string | — |
Also accepts the other native `svg` attributes.
```tsx
```
## Source
```tsx
import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";
export function Spinner({ className, ...props }: ComponentProps<"svg">) {
return (
);
}
```