Button that can

Can a button be created that changes to a pressed state when you press it and then navigate to another frame after a short delay?

I’m developing a mobile app and need my buttons to have a pressed state before navigating to another frame.

I am trying to resemble a real-world app, following the M3 material design guidelines

I tried making a component with both variants of the button (“default” and “pressed”), so when the default is clicked it changes to the “pressed” variant, and the “pressed” variant changes back to the “default” state after a delay. But I can’t figure out how to navigate to another frame while making the button reset its state to the “default” variant

I tried asking chat gpt but it didn’t work either, this is what it told me:

Interaction for the “pressed” state:

1. Select the button component.
2. Go to the “Prototype” panel (Shift + E).
3. Add an interaction by selecting the “Default” state and then clicking the “+” symbol in the interactions panel.
4. Configure the interaction as follows:

• Trigger: On click
• Action: Change to
• Destination: Pressed

Interaction to return to the “Default” state:

1. Select the “Pressed” state of the button.
2. Add another interaction in the “Prototype” panel.
3. Configure the interaction as follows:

• Trigger: After delay (you can set it to 0.3 seconds to make the “pressed” effect noticeable)
• Action: Change to
• Destination: Default

Adding navigation to another frame:

1. Navigation interaction:

• Select the “Pressed” state of the button.
• Add a new interaction in the “Prototype” panel.
• Configure the interaction as follows:
  • Trigger: On click
  • Action: Navigate to
  • Destination: The frame you want to navigate to.

With these steps, your button should change to the “pressed” state when clicked, return to the “Default” state after a short delay, and navigate to another frame.