# Add to Cart Button

Add opens into a quantity stepper in place.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/add-to-cart-button
```

## Usage

```tsx
import { AddToCartButton } from '@/components/fetaui/add-to-cart-button'

export function Example() {
  return <AddToCartButton max={9} onValueChange={setQuantity} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| label | string | Add |
| value | number |  |
| defaultValue | number | 0 |
| onValueChange | (value) => void |  |
| max | number | 9 |
| disabled | boolean | false |
| animated | boolean | true |

## When to use

- For adding items from a product list.

## When not to use

- For large quantities: use an Input.

## Accessibility

- The count is announced as it changes.
- Minus is named Remove at one.

## Motion

- The width eases from 80 to 108 px.
- Holding a step repeats after 380 ms, speeding up from 150 to 55 ms.
- Digits roll.
- With reduced motion, the press scale is off and color changes stay.