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

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

Loading playground...

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

npx merchify-cli init

This CLI will guide you through setting up Merchify components in your project