Add to Cart

Smart add-to-cart button with built-in validation, loading states, and error handling that automatically works with Product context.

Interactive Demo

AddToCart is an optional React convenience over the mockup URL. Buying is also just a URL (img → buy) — this component is the React ergonomics on top.

Try the add-to-cart button in different configurations using the variant switcher:

Loading playground...

Component Props

onClick(cartDetail: CartDetail) => void

Callback function that receives the cart detail object when item is successfully added

onError(error: Error) => void

Callback function for handling validation or cart errors

textstring

Button text in default state (default: "Add to Cart")

loadingTextstring

Button text during cart operation (default: "Adding...")

successTextstring

Button text after successful addition (default: "Added!")

quantitynumber

Number of items to add (default: 1)

simulateDelaynumber

Simulated cart operation delay in milliseconds (default: 1000)

classNamestring

CSS classes to apply to the button element

Installation

npm install @snowcone-app/ui

Styling — your Tailwind v4 build compiles it. In your global stylesheet, add @import '@snowcone-app/ui/styles/globals.css' (brings in Tailwind, the theme tokens, and an @source for the package) plus an @source for your own code. In Next.js, also add transpilePackages: ['@snowcone-app/ui']. Add className="dark" on an ancestor for dark mode.