Framer X Tutorial: 07. Code Components - Interactive Button with states

By following this tutorial, you will learn how to create your first code component, an interactive button with different states. Let's do it!

---

[pukwaan]

Girl with brains. Such a rare thing. Subscribed.

Fantastic tutorial series 🙂🙌 Helped me so much!

Small suggestion from my side: it took me a while to understand that I need to name my text element "myLabel" in order to connect it with the custom property. A small hint might help.


Keep up the great work! 🙌

[iabdulrhman]

This series has been very helpful for me! Thank you!


One thing I spent sometime to debug is in the "MyButton (props)" function. In the video you have:


and I was confused since the border is no showing in preview. So I had to download your final project and found that it supposed to be
border={props.borderStyle}


Just something to save people's time debugging. Thank you again!

[marceaennamorato]

This was so helpful Athanasia! I would love to see how you get a button to remain in an active colored state, and how you would trigger a tap state to resolve the active state back to the default.

[alexandreconil]

It's really cool, again! Thanks from France.

[jimmy]

Great tutorial! Quick question, how would you code it to change background image of a button?

[toheeb]

Super helpful series Athanasia! THANK YOU!!!!
I had an issue with onHoverStart & onHoverEnd, it flickers on my end here (I'm using Framer Web). However, onMouseEnter and onMouseLeave works as expected when hovered.
May I ask, any plan for the login form you stated at the end of the video?

[JanSenderek]

This seems outdated. Importing a component from canvas as used in the video above does not appear to be working like this in Framer anymore.

[andreanemet]

Awesome videos Athanasia! What software do you use to make them? I like the intro effect a lot :)

[MarkDMongie]

How can I add a link override when I use MyButton? I cannot attach a frame (new screen) link to the MyButton component when your button is placed on the frame/screen. My guess is I will need to add some kind of onClick override to the button, but I don't know how to code that. Thanks.

[scmwalsh]

How do you setup changing the text color?