Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/commerce/wishlist-toggle.

When to use it

Use WishlistToggle when the visitor should be able to save or unsave an item with one direct action.

It is small enough for cards and strong enough for product detail pages when paired with clear feedback.

Composition notes

active reflects saved state, onToggle handles the action, and loading is useful when the save request is still in flight. Keep that state wired to the real wishlist canonical reference.

Behavior and theming guidance

Use the smallest size that still feels easy to hit in the current layout. When the control is icon-only, make sure the accessible label clearly explains the action and current state.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=WishlistToggle.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes