---
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 @madeui/cli add spinner
```

## Usage

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

## Sizes

The spinner is 16px (`icon.md`) by default. Pass another `icon.*` size from
`@/lib/stylex-utils` through `style` to resize it.

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

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

export default function SpinnerSizes() {
  return (
    <div {...stylex.props(styles.row)}>
      <Spinner style={icon.xs} />
      <Spinner />
      <Spinner style={icon.lg} />
    </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

A lucide `LoaderCircle` 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).