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 <AddToCartButton variantId={variantId} />;
}

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

Props

AddToCartButtonPropsForDocs

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.

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.

attributes

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

buttonRef

A `ref` to the underlying button

children

Any ReactNode elements.

defaultOnClick

A default `onClick` behavior

onClick

Click event handler. Default behaviour triggers unless prevented

quantity

The item quantity.

sellingPlanId

The selling plan ID of the subscription variant

variantId

The ID of the variant.