Skip to content

Search is only available in production builds. Try building and previewing the site to test it out locally.

WishlistToggle container

The WishlistToggle container provides a button for adding and removing specific products. Configuration options drive its behavior and appearance, such as size and variant.

Wishlist container

Wishlist container

Configurations

The WishlistToggle container provides the following configuration options:

OptionsTypeReq?Description
productobjectYesThe product object to add to or remove from a wishlist.
iconWishlistedVNodeNoThe icon to show when the product is already in the wishlist.
iconNotWishlistedVNodeNoThe icon to show when the product is not in the wishlist.
sizestringNoThe size of the button, "medium" or "large".
variantstringNoThe variant of the button from "primary", "secondary" or "tertiary".
disabledbooleanNoIf true, the button is disabled.
labelToWishliststringNoThe label to show when the product is not in the wishlist.
labelWishlistedstringNoThe label to show when the product is already in the wishlist.
onClickfunctionNoA function that is executed when the user clicks the button.

Example

The following example demonstrates how to render the Wishlist container:

provider.render(WishlistToggle, {
product: sampleProduct,
iconWishlisted: <Icon name="heart" />,
iconNotWishlisted: <Icon name="heart-outline" />,
size: 'medium',
variant: 'primary',
labelToWishlist: 'Add to Wishlist',
labelWishlisted: 'Remove from Wishlist',
});