# Particle Button

An async button that walks Idle, Pending, Success and Error.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/particle-button
```

## Usage

```tsx
import { ParticleButton } from '@/components/fetaui/particle-button'

export function Example() {
  return <ParticleButton label="Save changes" onAction={save} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| variant | primary, outline | primary |
| label | string | Save changes |
| pendingLabel | string | Saving |
| successLabel | string | Saved |
| errorLabel | string | Try again |
| onAction | () => Promise<void> | void |  |
| disabled | boolean | false |
| animated | boolean | true |

## When to use

- For a save or submit with a clear result.

## When not to use

- For a plain async action: use Button status.

## Accessibility

- Pending sets aria-busy, and each result is announced.
- The width stays locked while it works.

## Motion

- Success throws 12 chips with gravity and spin over 650 ms.
- Error shakes.
- With reduced motion, there are no chips and no shake.
- Swift uses color and a haptic instead of chips.