hydrogen/packages/hydrogen/src/components/AddToCartButton/README.md

The AddToCartButton component renders a button that adds an item to the cart when pressed. It must be a descendent of the CartProvider component.

Example code

import {
  CartProvider,
  CartUIProvider,
  CartContainer,
  AddToCartButton,
} from '@shopify/hydrogen';

export function MyComponent() {
  // ...

  return (
    <CartProvider>
      <CartUIProvider>
        <AddToCartButton
          variantId="1234"
          quantity={1}
          attributes={[{key: 'Engraving', value: 'Hello world'}]}
          accessibleAddingToCartLabel="Adding item to your cart"
        >
          Add to Cart
        </AddToCartButton>
        <CartContainer>{/* Your cart container JSX */}</CartContainer>
      </CartUIProvider>
    </CartProvider>
  );
}

Props

Name	Type	Description
attributes?	Unknown<UndocumentedType, UndocumentedType>[]	An array of cart line attributes that belong to the item being added to the cart.
variantID	string	The ID of the variant.
quantity?	number	The item quantity.
children	ReactNode	Any ReactNode elements.
accessibleAddingToCartLabel?	string	The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page.

Component type

The AddToCartButton component is a client component, which means that it renders on the client. For more information about component types, refer to React Server Components.

Used by

• SelectedVariantAddToCartButton