Add to Cart Button
Lit Add to cart key that morphs into a − n + stepper with a rolling quantity, flies a dot to a cart badge that bumps, shows a Removed state at zero and an optimistic loading state while the promise runs (rolls back on failure). Exports CartBadge.
Preview
Kitchen
- Stoneware mug$22
- Gooseneck kettle$176
- House blend, 250 g$14
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| quantity / defaultQuantity | number | 0 | Controlled or initial quantity; 0 shows the Add to cart key. |
| onQuantityChange | (quantity: number) => void | Promise<unknown> | — | Called on every change; a promise shows a spinner and locks the control, and a rejection rolls back. |
| max | number | 99 | Upper limit for +. |
| cartRef | RefObject<HTMLElement | null> | — | Where the flying dot lands, e.g. a CartBadge. |
| label | string | — | Product name used in the accessible labels and announcements. |
| size | "md" | "lg" | "md" | Key height. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.