Button Activity Solution

[00:00:00]
>> Hopefully you were able to add your secondary and tertiary button styles. Let's go ahead, I'm gonna add mine in. So, export const. This is gonna be a named export, okay? So as opposed to the default export. I will refactor that later, so don't worry about it. export const, I'm gonna do a SecondaryButton.

[00:00:17]
And again, this is gonna be a styled button. Not an HTML button, our button that we just created. So my secondary button, if I go look at my Figma file, and yours can look just like however your buttons look like. Let me find my Figma file here. If I go back and look at my Buttons tab, We can see mine is a ghost button, okay?

[00:00:40]
So mine's not gonna have a background. So I'm gonna set background to none. I'm gonna set a border of 2px solid, and I want it my primaryBlue. And I am going to set my color also to primaryBlue. My tertiary button's gonna look pretty similar. So I'm just gonna copy and paste that for the sake of saving a little bit of time.

[00:01:03]
This'll be TertiaryButton, again, no background on mine. It just simply looks like a link, so my border's also gonna be none. But I don't need to explicitly state border none, just because it's already declared up here in our base Button. It's not, I lied, it's not declared, I'm gonna set border to none.

[00:01:20]
Okay, and again, color is primaryBlue. So now that we have those exported, let's go import them. Since these are named imports, we're gonna do SecondaryButton and TertiaryButton. And since we're gonna be returning multiple items, and we know in React we have to have one top level, I'm just gonna surround those with a div.

[00:01:42]
We've got our primary button and we've got, just gonna copy and paste twice. I'm gonna use that same trick by highlighting this PrimaryButton, hitting Cmd+D once, and changing it to SecondaryButton. Let's do the same with TertiaryButton. And I'm gonna change this to Goodbye world, and I don't know, Hey world, okay.

[00:02:03]
And so now, if I come back, you can see they're all being rendered here. If you have different CSS, totally fine, it should look like your component library.