Packages
react
components
AddToCartButton

AddToCartButton

The AddToCartButton component renders a button that adds an item to the cart when pressed. It must be a descendant of the CartProvider component.

Usage

import React from "react";
import { AddToCartButton } from "@airsoko/react";
 
const MyComponent = () => {
  return (
    <AddToCartButton
      variantId="your-variant-id"
      quantity={1}
      accessibleAddingToCartLabel="Adding item to cart"
    >
      Add to Cart
    </AddToCartButton>
  );
};
 
export default MyComponent;

Props

NameTypeDescription
attributes{ key: string; value: string; }[]An array of cart line attributes that belong to the item being added to the cart.
variantIdstring | nullThe ID of the variant.
quantitynumberThe item quantity.
accessibleAddingToCartLabelstringThe 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.
sellingPlanIdstringThe selling plan ID of the subscription variant.