# Add to Cart Button

Add button that becomes its own result: busy dots while adding, a check and “In bag”, then a quantity stepper with a trash icon at one. A compact version stretches open over product photos.

> Composed · Pro · Actions — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/add-to-cart-button
```

## Import

```tsx
import { AddToCartButton } from "@/components/ui/add-to-cart-button/add-to-cart-button";
```

## Variants

- `compact` — Compact quick-add: `npx @lumioui/cli add pro/add-to-cart-button-compact`
- `confirm` — Confirm: `npx @lumioui/cli add pro/add-to-cart-button-confirm`
- `stepper` — Stepper: `npx @lumioui/cli add pro/add-to-cart-button-stepper`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `quantity?` | `number` | Controlled quantity in the bag. Omit + use `defaultQuantity` for uncontrolled. |
| `defaultQuantity?` | `number` | Uncontrolled initial quantity. Default 0. |
| `onQuantityChange?` | `(quantity: number) => void` | Fires with the next quantity after every add / step / remove. |
| `mode?` | `"stepper" | "confirm"` | "stepper" resolves into − qty +; "confirm" holds "In bag ✓" then returns. Default "stepper". |
| `max?` | `number` | Upper bound — the plus flickers with a warning haptic past it. Default 99. |
| `label?` | `string` | Idle label. Default "Add to bag". |
| `addedLabel?` | `string` | Confirm-state label and stepper caption ("2 in bag"). Default "In bag". |
| `price?` | `string` | Trailing price on the idle label, e.g. "$48" → "Add to bag · $48". |
| `onAdd?` | `() => void | Promise<unknown>` | Called before the first add commits. May return a Promise — busy dots hold the label's place until it settles; a rejection flickers and stays idle. |
| `confirmDuration?` | `number` | How long "In bag ✓" holds in confirm mode before returning, in ms. 0 keeps it. Default 1600. |
| `size?` | `"md" | "lg"` | Height preset for the full-width button: md 44 · lg 56. Default "lg". |
| `compact?` | `boolean` | Round 36pt "+" quick-add that stretches into a stepper pill (product tiles). |
| `soldOut?` | `boolean` | Out of stock — renders the sold-out label and blocks adds. |
| `soldOutLabel?` | `string` | Sold-out label. Default "Sold out". |
| `disabled?` | `boolean` | — |
| `itemName?` | `string` | Product name for screen readers — "Add Trail Runner to bag". |
| `className?` | `string` | — |

## Icons rendered

- `plus` — /icons.html?i=plus

Source: https://lumioui.com/components/add-to-cart-button