Skip to main content
Loic1
Loic1
October 5, 2023
Question

Segmented toggle button not working

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

This topic has been closed for replies.

3 replies

Celine_
Figmate
Celine_
Community Support
October 17, 2023

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!).

Loic1
Loic1Author
October 17, 2023

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

Celine_
Figmate
Celine_
Community Support
October 17, 2023

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”)

Capture d’écran 2023-10-17 à 17.17.14

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!

Terms & ConditionsAccessibility statement