Button Activity Exercise

[00:00:00]
>> Let's turn our designs into styled components. We wanna create our secondary and tertiary buttons. But if you notice, some of these properties, our CSS properties, are gonna be the same. Our padding's gonna be the same, our font size. So do we repeat ourselves for every single button?

[00:00:18]
You could, but let's actually make a base button component that's gonna have all of our shared styling. And then we can kind of inherit from it for our other buttons. So let's refactor this a little, so we've got const button. Again, this is gonna be a button, so styled.button.

[00:00:35]
I'm gonna pull font size and padding straight out of our primary button and put it in our new button we're creating here. I'm also gonna give up a border radius of 2 pixels. You can follow along with me, or you can actually, you'll have time later, but you can apply the styles from your design that you just created in Figma.

[00:00:57]
So I'm gonna set a minimum width so that, if we have super small buttons, they'll at least have 100 pixels in width. On a button, we want to indicate to the user that, hey, this is clickable, it's a form element. So I'm gonna give it a cursor pointer.

[00:01:12]
And I'm just gonna set my font-family to Roboto Mono. Again, feel free to use your font family. So now I've got this base button, I'm not actually using it anywhere, so let's go ahead and change that. Where it says styled.button, we're gonna replace this now. We're gonna open and close parentheses here.

[00:01:34]
And this is going to say, inherit all the properties from our new button component. So we're not using an HTML button element anymore. We're gonna inherit everything from our button component we just created. And so if I save this, you should see, it now has my font style, has a little bit of a border radius.

[00:01:50]
And if I hover over, my cursor pointer is being applied. So if you used a Google font, and you're kinda trying to figure out how to get it integrated with this, cuz that can be a little tricky. You just need to come to the Google font site, select a font, and this link here that you see, copy that.

[00:02:16]
We're gonna open our index.html, and you can go ahead and throw that right in the head, okay? So if your front is not already on your local computer, you can just go ahead and get it that way. One other thing before we start creating our secondary and tertiary buttons.

[00:02:33]
I don't need to save mine cuz I already have my font on my computer. Let's create a variable, so let's say I wanna use my primary color, okay? Why don't you go grab the hex code for your primary color, whatever that may be. And let's create a new variable, so constant primary, I'm gonna call it primaryBlue, you can call it whatever you'd like.

[00:02:51]
I'm gonna set my hex code here. And I wanna use this, so instead of saying background color red, let's actually use my variable. So it's very similar to a template string. You can actually evaluate variables inside of styled components using the dollar sign curly brackets. So I'm gonna say primaryBlue here.

[00:03:13]
And you can see now that my style is being interpolated into actual hex code, which is really nice. So what I would like you to do, take the next five minutes or so, it doesn't have to be perfect. I want you to create your secondary button and your tertiary button.

[00:03:29]
And you can use your designs on Figma, or you´re also welcome to use my design if you would prefer that, okay? So let´s take ten minutes, let's code up our secondary and tertiary buttons, and let's get them all rendering in our index.js file.