Button Variations

[00:00:00]
>> All right, let's move on to some modifiers. We're gonna install another package. So go ahead and open your terminal once more. It's npm install styled-components. There's an s on components. I have messed this up multiple times. Modifiers, okay? So, styled-component modifiers are going to allow you to pass in an array of different modifiers on our components.

[00:00:31]
And say, hey, I want this to be a small button, I want this to be a big button. So very much like this. You can pass in just a simple string that says, I want this to be a success button. Or you can pass in an array. So this is what we're installing right now.

[00:00:46]
So once that install it, let's go into our button file again. We're gonna import applyStyleModifiers from styled-components modifiers. Now we're gonna actually create a constant that tells styled-components what kinda modifiers we wanna have. So, const BUTTON_MODIFIERS. So we're gonna give them small button. And we're also gonna have a large button.

[00:01:21]
And these are going to be modifiers that we just can pass in. So, what I want is to be able to, let me get rid of these disabled. What I ideally want is to be able to come in here and say modifiers. I want this to be a small primary button.

[00:01:35]
Or, this has to be in curly brackets cuz it's a JSX expression. I want this to be a large button, okay? So, this is what we want. So, let's actually go build that. So, if it's a small button, I want to set the font size to typeScale.helperText. So it's gonna be 0.9 or 0.8 rem.

[00:02:02]
Why is this yelling at me? I put opening in curly brackets here. We don't want that. This is not JavaScript. This is styled-components. So, we're gonna use backticks. So, it has to have backticks here instead of open and closed brackets. Just like that. And I'm going to set padding here to eight pixels.

[00:02:23]
And remember I had that diagram in our design part of this. And I said, well, padding on a small button, eight pixels sounds good. For larger entity font size, we're gonna do a typeScale. But, I'm gonna give it an H5. You can give it whatever you like. And I'm gonna give this padding of 16 pixels, 24 pixels.

[00:02:41]
So 16 top and bottom and 24 left and right. So we haven't used this yet. So, what we need to do is, for each of our three buttons, primary, secondary and tertiary, we're gonna come down here to our dollar sign curly brackets and we're gonna say, applyStyleModifiers. Call the function and pass it our modifiers button.

[00:03:03]
Modifiers okay? We're gonna do this on all three. Does anyone know why we're applying it to all three as opposed to the top level? If we were to apply that up here on our button, all of these are inheriting from Button. It would actually be overwritten, probably, by a lot of individual styling on here.

[00:03:25]
So we wanna make sure that any modifiers are the last CSS to be applied so that they are shown. And now we go back to our UI. We can see we've got a small primary button, a big secondary button and a tertiary button.