Back to components
Commerce component
Wishlist Button
Animated heart toggle for wishlists — floating variant for over-image overlay, three sizes.
Install
What it does
- Bounce animation on toggle (native driver, 60fps)
- Floating variant with bg + shadow for image overlays
- Sm / md / lg sizes with proper hit slop
- Full accessibility state
When to use
Use it
Anywhere a user can save an item for later — product cards, detail pages.
Skip it
Like / favourite buttons (use a different visual — heart implies wishlist intent).
Files & routes added
- components/commerce/wishlist-button.tsx