---
title: AddToCartButton
description: Adds products to Shop's cart with checkmark animation feedback.
source_url:
html: 'https://shopify.dev/docs/api/shop-minis/components/commerce/addtocartbutton'
md: >-
https://shopify.dev/docs/api/shop-minis/components/commerce/addtocartbutton.md
api_name: shop-minis
---
# AddToCartButton
Adds products to Shop's cart with checkmark animation feedback. Users can continue shopping and add more items before checkout. Use this for browsing experiences where customers might want multiple products. For immediate single-product purchases, use `BuyNowButton` instead.
#### Props
* **className**
**string**
CSS class name
* **disabled**
**boolean**
Whether the button is disabled
* **discountCodes**
**string\[]**
The discount codes to apply to the cart
* **product**
**Product**
The product to add to the cart
* **productVariantId**
**string**
The GID of the product variant. E.g. `gid://shopify/ProductVariant/456`. Optional — when omitted, the button opens the native variant selector sheet so the user can pick a variant before adding to cart. Requires `product` to be set so the button has a productId to act on.
* **size**
**'default' | 'sm' | 'lg'**
Button size variant
### Product
* compareAtPrice
```ts
Money | null
```
* defaultVariantId
```ts
string
```
* featuredImage
```ts
ProductImage | null
```
* id
```ts
string
```
* isFavorited
```ts
boolean
```
* options
The product's configurable options (e.g. Color, Size). Optional for backwards compatibility with products returned by older Shop app hosts; treat as \`\[]\` when undefined.
```ts
ProductOption[]
```
* price
```ts
Money
```
* referral
```ts
boolean
```
* reviewAnalytics
```ts
{ averageRating?: number; reviewCount?: number; }
```
* selectedVariant
```ts
ProductVariant
```
* shop
```ts
ProductShop
```
* title
```ts
string
```
* variants
```ts
ProductVariant[]
```
### Money
* amount
```ts
Decimal
```
* currencyCode
```ts
CurrencyCode
```
### Decimal
```ts
string
```
### CurrencyCode
```ts
'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BYR' | 'BZD' | 'CAD' | 'CDF' | 'CHF' | 'CLP' | 'CNY' | 'COP' | 'CRC' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JEP' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KID' | 'KMF' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LTL' | 'LVL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STD' | 'STN' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'UYU' | 'UZS' | 'VED' | 'VEF' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XCD' | 'XOF' | 'XPF' | 'XXX' | 'YER' | 'ZAR' | 'ZMW'
```
### ProductImage
* altText
```ts
string | null
```
* height
```ts
number | null
```
* id
```ts
string | null
```
* sensitive
```ts
boolean | null
```
* thumbhash
```ts
string | null
```
* url
```ts
string
```
* width
```ts
number | null
```
### ProductOption
A configurable product option (e.g. Color, Size) and the set of values it accepts across all variants.
* id
Globally-unique identifier for the option.
```ts
string
```
* name
The display name of the option. E.g. \`Color\`.
```ts
string
```
* values
All possible values for the option across variants. E.g. \`\['Red', 'Blue']\`.
```ts
string[]
```
### ProductVariant
* availableForSale
Whether the variant can be purchased. When \`false\`, calls to add the variant to cart or buy it through the SDK will fail. UI should be gated on this flag. May be \`undefined\` if the variant was sourced from an API that does not expose stock state.
```ts
boolean
```
* compareAtPrice
```ts
Money | null
```
* id
```ts
string
```
* image
```ts
ProductImage | null
```
* isFavorited
```ts
boolean
```
* price
```ts
Money
```
* selectedOptions
The (name, value) pairs of product options this variant corresponds to. E.g. \`\[{name: 'Color', value: 'Green'}, {name: 'Size', value: 'M'}]\`. Optional for backwards compatibility with variants returned by older Shop app hosts; treat as \`\[]\` when undefined.
```ts
ProductSelectedOption[]
```
* title
```ts
string
```
### ProductSelectedOption
A single (name, value) pair that identifies which value of a product option a variant corresponds to. E.g. \`{name: 'Color', value: 'Green'}\`.
* name
```ts
string
```
* value
```ts
string
```
### ProductShop
* id
```ts
string
```
* name
```ts
string
```
## Preview
### Examples
* #### AddToCartButton
##### tsx
```tsx
import * as React from 'react'
import {AddToCartButton, useProduct} from '@shopify/shop-minis-react'
export default function MyComponent() {
const {product, loading} = useProduct({
id: 'gid://shopify/Product/7234590834753',
})
if (loading || !product) {
return null
}
return (
)
}
```
##### With Discount Codes
```tsx
import * as React from 'react'
import {AddToCartButton, useProduct} from '@shopify/shop-minis-react'
export default function MyComponent() {
const {product, loading} = useProduct({
id: 'gid://shopify/Product/7234590834753',
})
if (loading || !product) {
return null
}
return (
)
}
```
***