Add
The component renders a button that adds an item to the cart when pressed.
It must be a descendent of the component.
Anchor to propsProps
- Anchor to childrenchildrenReactNoderequired
Any ReactNode elements.
- Anchor to accessibleAddingToCartLabelaccessibleAddingToCartLabelstring
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.
- AsType
Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a
buttonelement, or a component that renders an underlying button.- Anchor to attributesattributes{ key: string; value: string; }[]
An array of cart line attributes that belong to the item being added to the cart.
- Ref<HTMLButtonElement>
A
refto the underlying button- Anchor to defaultOnClickdefaultOnClick(event?: MouseEvent<HTMLButtonElement, MouseEvent>) => boolean | void
A default
behavior- Anchor to onClickonClick(event?: MouseEvent<HTMLButtonElement, MouseEvent>) => boolean | void
Click event handler. Default behaviour triggers unless prevented
- Anchor to quantityquantitynumber
The item quantity.
- Anchor to sellingPlanIdsellingPlanIdstring
The selling plan ID of the subscription variant
- Anchor to variantIdvariantIdstring | null
The ID of the variant.
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.
string - 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.
AsType - attributes
An array of cart line attributes that belong to the item being added to the cart.
{ key: string; value: string; }[] - buttonRef
A `ref` to the underlying button
Ref<HTMLButtonElement> - children
Any ReactNode elements.
ReactNode - defaultOnClick
A default `onClick` behavior
(event?: MouseEvent<HTMLButtonElement, MouseEvent>) => boolean | void - onClick
Click event handler. Default behaviour triggers unless prevented
(event?: MouseEvent<HTMLButtonElement, MouseEvent>) => boolean | void - quantity
The item quantity.
number - sellingPlanId
The selling plan ID of the subscription variant
string - variantId
The ID of the variant.
string | null
export interface AddToCartButtonPropsForDocs<
AsType extends React.ElementType = 'button',
> extends AddToCartButtonPropsBase,
CustomBaseButtonProps<AsType> {}Example code
examples
Example code
description
I am the default example
JavaScript
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
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} />; }