---
title: AddToCartButton
description: |-
  The `AddToCartButton` component renders a button that adds an item to the cart when pressed.

  It must be a descendent of the `CartProvider` component.
api_version: 2025-04
api_name: hydrogen-react
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
---

# Add​To​Cart​Buttoncomponent

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.

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

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

* buttonRef

  Ref\<HTMLButtonElement>

  A `ref` to the underlying button

* defaultOnClick

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

  A default `onClick` behavior

* onClick

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

  Click event handler. Default behaviour triggers unless prevented

* quantity

  number

  The item quantity.

* sellingPlanId

  string

  The selling plan ID of the subscription variant

* variantId

  string | null

  The ID of the variant.

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