---
title: Spinner
description: "An indicator that shows something is loading."
---

```tsx
import { Button } from '@/components/ui/button';
import { Spinner } from '@/components/ui/spinner';

export default function SpinnerDemo() {
  return (
    <Button disabled>
      <Spinner /> Loading…
    </Button>
  );
}
```

## Install

```bash
npx shadcn@latest add @madeui/spinner
```

## Usage

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

## Sizes

`width` and `height` are plain SVG attributes (like `viewBox`), so pass them
directly to resize the spinner.

```tsx
import * as stylex from '@stylexjs/stylex';

import { Spinner } from '@/components/ui/spinner';
import { space } from '@/lib/constants.stylex';

export default function SpinnerSizes() {
  return (
    <div {...stylex.props(styles.row)}>
      <Spinner width="12" height="12" />
      <Spinner width="16" height="16" />
      <Spinner width="24" height="24" />
      <Spinner width="32" height="32" />
    </div>
  );
}

const styles = stylex.create({
  row: {
    alignItems: 'center',
    display: 'flex',
    gap: space.s4,
  },
});
```

## Composition

`Spinner` inherits `currentColor`, so it drops into any text-colored
container — a `Badge`, a line of body text, anywhere.

```tsx
import * as stylex from '@stylexjs/stylex';

import { Badge } from '@/components/ui/badge';
import { Spinner } from '@/components/ui/spinner';
import { space } from '@/lib/constants.stylex';
import { colors } from '@/lib/tokens.stylex';

export default function SpinnerComposition() {
  return (
    <div {...stylex.props(styles.stack)}>
      <Badge variant="secondary">
        <Spinner width="12" height="12" />
        Syncing
      </Badge>
      <p {...stylex.props(styles.line)}>
        <Spinner />
        Fetching the latest results…
      </p>
    </div>
  );
}

const styles = stylex.create({
  stack: {
    alignItems: 'flex-start',
    display: 'flex',
    flexDirection: 'column',
    gap: space.s4,
  },
  line: {
    alignItems: 'center',
    color: colors.mutedForeground,
    display: 'flex',
    gap: space.s2,
    margin: 0,
  },
});
```

## API reference

An inline SVG with a spin animation, sized 16px and colored via `currentColor` — it inherits the surrounding text color (e.g. inside a `Button`). Accepts SVG props plus a `style` prop (`StyleXStyles`, merged last).