# WishlistButton

> Heart-shaped wishlist toggle button. Place alongside product cards or inside BuyBox sections.

Canonical URL: https://fa7e86e3d553:3005/islands/commerce/wishlist-button

Heart-shaped wishlist toggle button. Place alongside product cards or inside BuyBox sections.

**Category**: Commerce

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| productId | string | Yes | - | Shopify product GID or handle |
| variantId | string | No | - | Specific variant to wishlist |
| size | enum | No | "md" | Button size: "sm", "md", "lg" |
| className | string | No | - | Additional CSS class |

## Embed Example

```html
<lx-island name="WishlistButton">
  <script type="application/json">
{
  "productId": "example-productId"
}
  </script>
</lx-island>
```

## Usage Patterns

**Inside a product card grid:**
```html
<lx-island name="WishlistButton">
  <script type="application/json">
{
  "productId": "example-productId"
}
  </script>
</lx-island>
```

**Alongside BuyBox:**
```html
<lx-island name="BuyBox">
  <script type="application/json">
{
  "product": {
    "title": "example-title",
    "price": "example-price",
    "variants": []
  }
}
  </script>
</lx-island>

<lx-island name="WishlistButton">
  <script type="application/json">
{
  "productId": "example-productId"
}
  </script>
</lx-island>
```

## Events

| Event | Direction | Payload |
|-------|-----------|---------|
| wishlist:toggle | Emits | `{productId, variantId?, added: boolean}` |
| wishlist:count | Listens | Updates badge count when received |

## Tips

- State persists in localStorage (`_lx_wishlist`)
- Animates on toggle (heart fill + scale)
- Works standalone without any other islands
- Use `size: "sm"` for product card overlays, `"lg"` for PDP hero sections