Choose a version:

AddToCartButton

The AddToCartButton component renders a button that adds an item to the cart when pressed.

It must be a descendent of the CartProvider component.

Anchor to propsProps

Anchor to children children ReactNode required: Any ReactNode elements.
Anchor to attributes attributes { key: string; value: string; }[]: An array of cart line attributes that belong to the item being added to the cart.
Anchor to variantId variantId string: The ID of the variant.
Anchor to quantity quantity number: The item quantity.
Anchor to accessibleAddingToCartLabel 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.
Anchor to sellingPlanId sellingPlanId string: The selling plan ID of the subscription variant
Anchor to as as AsType: Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a button element, or a component that renders an underlying button.
Anchor to onClick onClick (event?: MouseEvent<HTMLButtonElement, MouseEvent>) => boolean | void: Click event handler. Default behaviour triggers unless prevented
Anchor to defaultOnClick defaultOnClick (event?: MouseEvent<HTMLButtonElement, MouseEvent>) => boolean | void: A default onClick behavior
Anchor to buttonRef buttonRef Ref<HTMLButtonElement>: A ref to the underlying button

Examples

import {AddToCartButton} from '@shopify/hydrogen-react';

export default function ProductAddToCartButton({product}) {

const variantId = product.variants[0].id;

if (!variantId) {

return null;

}

return <AddToCartButton variantId={variantId} />;

}

Examples

Example code

Description

I am the default example

JavaScript

import {AddToCartButton} from '@shopify/hydrogen-react';

export default function ProductAddToCartButton({product}) {
  const variantId = product.variants[0].id;

  if (!variantId) {
    return null;
  }

  return <AddToCartButton variantId={variantId} />;
}

TypeScript

import {AddToCartButton} from '@shopify/hydrogen-react';
import type {Product} from '@shopify/hydrogen-react/storefront-api-types';

export default function ProductAddToCartButton({product}: {product: Product}) {
  const variantId = product.variants[0].id;

  if (!variantId) {
    return null;
  }

  return <AddToCartButton variantId={variantId} />;
}

Was this page helpful?