# salla-add-product-button (https://docs.salla.dev/twilight/react/web-components/salla-add-product-button) {/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */} The add-to-cart button for a product. Use it on product pages and product cards. It adds the product to the cart on click and emits `success` or `failed`. Depending on the props it also shows a pre-order or booking label, a "notify me" availability control when the product is out of stock, a quick buy button and an Apple Pay button. Any text placed inside the element replaces the default label (except on narrow screens when `support-sticky-bar` is set). Extra attributes on the element, such as `width="wide"`, are copied to the inner `salla-button`. When a `salla-product-options` element with the same `product-id` is on the page, its options are validated before the product is added, and the add is skipped if validation fails. Booking products call the booking API instead of the cart, and guests are sent to the login flow first. ## Use it [#use-it] In HTML or JSX, use the tag `` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase). ```tsx import { SallaAddProductButton } from '@salla.sa/twilight-components-react/add-product-button'; ``` **Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see. ## Example [#example] ```tsx import { SallaAddProductButton } from '@salla.sa/twilight-components-react/add-product-button'; export function Example() { return ( ); } ``` ```html ``` ```tsx import { SallaAddProductButton } from '@salla.sa/twilight-components-react/add-product-button'; export function Example() { return ( Add to bag ); } ``` ```html Add to bag ``` ## Properties [#properties] | Property | Attribute | Description | Type | Default | | --------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `channels` | `channels` | Notification channels offered for the out-of-stock "notify me" control, used when `product-status` is `out-and-notify`. When empty, the store's configured availability channels are used. | `string` | | | `donatingAmount` | `donating-amount` | Amount to donate, sent as the donation amount. Used for `donating` products. | `number` | | | `hasPreOrder` | `has-pre-order` | When true, the button label is the pre-order label instead of the add-to-cart label. | `boolean` | `false` | | `notifyOptionsAvailability` | `notify-options-availability` | When true, listens to `product-options::change` events and switches to the availability ("notify me") control when a selected option is out of stock. Requires a `salla-product-options` element with the same `product-id`. | `boolean` | | | `productId` | `product-id` | The id of the product to add. It is also used to find the matching `salla-product-options` element. | `any` | | | `productStatus` | `product-status` | Availability of the product. `sale` makes the button active, `out` shows a disabled out-of-stock button and `out-and-notify` shows the availability ("notify me") control when notification channels exist. Defaults to `sale`. | `"out" \| "out-and-notify" \| "sale"` | `'sale'` | | `productType` | `product-type` | The kind of product. Affects the label and the flow: `booking` uses the booking flow, `donating` and `financial_support` never show the fast checkout widget. Defaults to `product`. | `"booking" \| "codes" \| "digital" \| "donating" \| "financial_support" \| "food" \| "group_products" \| "product" \| "service"` | `'product'` | | `quantity` | `quantity` | Quantity to add to the cart. A falsy value is left out of the request. | `number` | | | `quickBuy` | `quick-buy` | When true, shows the quick buy (buy now) button next to the add-to-cart button. It also requires the store's buy-now setting to be on, `product-status` to be `sale`, and `product-type` not to be `booking`. | `boolean` | | | `subscribedOptions` | `subscribed-options` | JSON string of option-id groups the current user is already subscribed to for back-in-stock notification, for example `"[[139487,2394739],[1212,1544]]"`. Only used together with `notify-options-availability`. | `string` | | | `supportStickyBar` | `support-sticky-bar` | Set to true when the button is used in a mobile sticky bar. On narrow screens (under 768px) the button may collapse to a cart icon with a hidden accessible label when quick buy and Apple Pay are both shown. | `boolean` | | ## Events [#events] Listen with `addEventListener`, or the `on` prop of the React wrapper (for example `onModalBack`). | Event | Description | Detail | | --------- | --------------------------------------------------------------------------------------------- | ------ | | `failed` | Fires when adding the product to the cart (or booking it) fails. `event.detail` is the error. | `any` | | `success` | Fires after the product is added to the cart (or booked). `event.detail` is the API response. | `any` | ## Slots [#slots] | Slot | Description | | --------- | ------------------------------------- | | (default) | Optional custom label for the button. | ## Related [#related] Renders: [``](https://docs.salla.dev/twilight/react/web-components/salla-product-availability), [``](https://docs.salla.dev/twilight/react/web-components/salla-button), [``](https://docs.salla.dev/twilight/react/web-components/salla-quick-buy). Used inside: [``](https://docs.salla.dev/twilight/react/web-components/salla-basket-gap), [``](https://docs.salla.dev/twilight/react/web-components/salla-product-card), [``](https://docs.salla.dev/twilight/react/web-components/salla-search-product-card).