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

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

```

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

```

## Props

### AddToCartButtonPropsForDocs

### attributes

value: `{ key: string; value: string; }[]`

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

### variantId

value: `string`

The ID of the variant.

### quantity

value: `number`

The item quantity.

### accessibleAddingToCartLabel

value: `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.

### sellingPlanId

value: `string`

The selling plan ID of the subscription variant

### as

value: `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.

### children

value: `ReactNode`

Any ReactNode elements.

### onClick

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

Click event handler. Default behaviour triggers unless prevented

### defaultOnClick

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

A default `onClick` behavior

### buttonRef

value: `Ref<HTMLButtonElement>`

A `ref` to the underlying button