Hello, so I recently created this segmented toggle button as shown in the file below, but it is not working as it should. When clicking on a specific category only one button should be colored at the same time. I was wondering if I could get any help with this issue.
Segmented toggle button
Hi Loic1,
I tried to replicate and it seems to work on my end. Can you clarify what your intend to do?
I have just edited your interaction “hover” to “click” in your “toggle button component”, so the action can work when you click in your button.
(Please check my recording if you can reproduce it, let me know if you have any questions!).
Hello, many thanks for your answer!. My intention for this toggle button is for the grey background to turn light orange when hovering for each of the categories. When any of the categories is clicked, the background would then turn bright orange. Also, only one of the categories should be activated (bright orange background) at the same time. I managed to do either the hover effect, or the click effect but not both at the same time. I was wondering if there is any way of combining the two together.
Thank you for your time,
Loic
Thank you for the clarification, Loic!
I think I’ve found a workaround (please check below the screen recording and let me know if this is what you intend to do):
For the interactions, I also marked “Reset component state” so this helps to have the initial state (grey button) that you are looking for. (On prototype tab> On click > Navigate to > Marked “Reset component state”)
I have also edited the interactions. Here the file if you want to check it (please duplicate the file, the file is “view only”): here
Let me know if this helps!