Add to Cart Button

Pro

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.

Preview

Installation

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

Usage

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

Examples

Compact quick-add

The round quick-add on a grocery aisle grid, green.

Confirm

The bottom of a sneaker product page, in ink.

Stepper

A bakery item sheet in a pickup-ordering app, orange.

API reference

Prop Type Default
quantity number

Controlled quantity in the bag. Omit + use defaultQuantity for uncontrolled.

 —
defaultQuantity number

Uncontrolled initial quantity. Default 0.

 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".

 "stepper"
max number

Upper bound — the plus flickers with a warning haptic past it. Default 99.

 99
label string

Idle label. Default "Add to bag".

 "Add to bag"
addedLabel string

Confirm-state label and stepper caption ("2 in bag"). Default "In bag".

 "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.

 1600
size "md" | "lg"

Height preset for the full-width button: md 44 · lg 56. Default "lg".

 "lg"
compact boolean

Round 36pt "+" quick-add that stretches into a stepper pill (product tiles).

 false
soldOut boolean

Out of stock — renders the sold-out label and blocks adds.

 false
soldOutLabel string

Sold-out label. Default "Sold out".

 "Sold out"
disabled boolean false
itemName string

Product name for screen readers — "Add Trail Runner to bag".

 —
className string —