Marigold Wishlist Button: a Diwali UI component

When to use the Marigold Wishlist Button

Use it on product cards where people save items to come back to. The grey bud and the bright flower look different enough that the saved state is clear at a glance, and the status line says it in words as well.

Add the Marigold Wishlist Button to React or Next.js

1. Pick a component. Open it in ExodeUI to change its text and colours, or keep it as it is.
2. Download the .bexode file and put it in your public folder.
3. Install the runtime with npm i exodeui.
4. Render it with ExodeUICanvas. Taps and hovers work out of the box, and fireTrigger plays it from your code.

import { ExodeUICanvas, useExodeUI } from 'exodeui';

export function MarigoldWishlistButton() {
  const { setEngine, fireTrigger } = useExodeUI();

  return (
    <>
      <div style={{ width: 400, height: 300 }}>
        <ExodeUICanvas
          src="/ui-gallery/files/marigold-wishlist.bexode"
          autoPlay
          onReady={setEngine}
          style={{ width: '100%', height: '100%' }}
        />
      </div>
      {/* Optional: taps on the canvas already work */}
      <button onClick={() => fireTrigger('in_save')}>Play from code</button>
    </>
  );
}

More Diwali UI components

• Diwali Primary Button
• Diya Toggle Switch
• Diwali Checkbox Group
• Diwali Tabs
• Diwali Toast Notification
• Rangoli Loading Spinner

Frequently asked questions

Is the Marigold Wishlist Button free to use?

Yes. Try it here, open it in ExodeUI on the free Community plan or download the .exode file.

What does the Marigold Wishlist Button do?

A save button on a product card: the bud blooms and throws petals. Tap the flower to see it.

Can I restyle the Marigold Wishlist Button for my brand?

Yes. Open it in ExodeUI and every colour, label, shape and timing can be edited. Any names and prices in it are sample content.

Can my code control it?

Yes. Fire its trigger (in_save) with fireTrigger from useExodeUI. Your own code still handles what the action does, such as saving the choice.

More from ExodeUI