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

Configurations

The WishlistToggle container provides the following configuration options:

Options	Type	Req?	Description
product	object	Yes	The product object to add to or remove from a wishlist.
iconWishlisted	VNode	No	The icon to show when the product is already in the wishlist.
iconToWishlist	VNode	No	The icon to show when the product is not in the wishlist.
size	string	No	The size of the button, "medium" or "large".
variant	string	No	The variant of the button from "primary", "secondary" or "tertiary".
disabled	boolean	No	If true, the button is disabled.
labelToWishlist	string	No	The label to show when the product is not in the wishlist.
labelWishlisted	string	No	The label to show when the product is already in the wishlist.
onClick	function	No	A 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" />,
    iconToWishlist: <Icon name="heart-outline" />,
    size: 'medium',
    variant: 'primary',
    labelToWishlist: 'Add to Wishlist',
    labelWishlisted: 'Remove from Wishlist',
  });