WishlistToggle
Save toggle for product cards and detail pages with active, loading, and size states.
Best for
Import
import { WishlistToggle } from "@enadhq/enad-react-sdk/client/storefront"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 source of truth.
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.
Examples
Live examples you can edit directly in the sandbox.
Interactive toggle
Use the toggle as the primary save affordance on cards and product pages.
Sizes
Match size to the density of the surrounding card or buy-box treatment.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| active | boolean | false | No description yet. |
| onToggle | string | — | No description yet. |
| loading | boolean | false | No description yet. |
| size | string | default | No description yet. |
| className | string | — | No description yet. |
| label | string | Add to wishlist | No description yet. |
| activeLabel | string | Remove from wishlist | Label when active state is true |