---
title: AddToCartButton
description: >-
  The AddToCartButton component renders a button that adds an item to the cart
  when pressed.
api_version: 2026-04
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/components/cart/addtocartbutton
  md: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/components/cart/addtocartbutton.md
api_name: hydrogen-react
---

# Add​To​Cart​Button

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

It must be a descendent of the `CartProvider` component.

#### Props

* **children**

  **ReactNode**

  **required**

  Any ReactNode elements.

* **accessible​Adding​To​Cart​Label**

  **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.

* **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.

* **attributes**

  **{ key: string; value: string; }\[]**

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

* **button​Ref**

  **Ref\<HTMLButtonElement>**

  A `ref` to the underlying button

* **default​On​Click**

  **(event?: MouseEvent\<HTMLButtonElement, MouseEvent>) => boolean | void**

  A default `onClick` behavior

* **on​Click**

  **(event?: MouseEvent\<HTMLButtonElement, MouseEvent>) => boolean | void**

  Click event handler. Default behaviour triggers unless prevented

* **parent**

  **CartLineParentInput**

  The parent line item of the item being added to the cart. Used for nested cart lines.

* **quantity**

  **number**

  The item quantity.

* **selling​Plan​Id**

  **string**

  The selling plan ID of the subscription variant

* **variant​Id**

  **string | null**

  The ID of the variant.

Examples

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  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

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

***