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.

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

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

  if (!variantId) {
    return null;
  }

  return ;
}

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 ;
}

Props

AddToCartButtonPropsForDocs

attributes

An array of cart line attributes that belong to the item being added to the cart.

variantId

The ID of the variant.

quantity

The item quantity.

accessibleAddingToCartLabel

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.

sellingPlanId

The selling plan ID of the subscription variant

as

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.

children

Any ReactNode elements.

onClick

Click event handler. Default behaviour triggers unless prevented

defaultOnClick

A default `onClick` behavior

buttonRef

A `ref` to the underlying button