Design Systems with React & Storybook

Button Variations Exercise

Design Systems with React & Storybook

Check out a free preview of the full Design Systems with React & Storybook course

The "Button Variations Exercise" Lesson is part of the full, Design Systems with React & Storybook course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to add success, failure, and warning buttons using button modifiers, after Emma demonstrates how to add button modifiers to change the style of a button within a theme.

Preview
Close

Transcript from the "Button Variations Exercise" Lesson

[00:00:00]
>> I am gonna do one example with you for the status, and then I'm gonna let you do the last two. So, doing it together is gonna help save some time just because this is little bit more confusing. So, we're gonna do status. And status is this success, error, and warning buttons down here, these colored ones.

[00:00:20]
So let's do one together. Let's go into our themes. And if you go back to the notes real quick under, where is that, button variations solution, I have this status. So to Brent's question, now I'm gonna actually create a status object that has some of these status colors in them.

[00:00:39]
You can copy and paste this, it might save some time as opposed to manually typing them out. We're all using the same status color. So that just makes a little bit more sense. So let's come in here and let's add our status object. Now we haven't imported these, so let's add yellow, red, and green to our colors imports, okay?

[00:00:58]
So now we've got status in our theme. I'm gonna do the warning with you, and then we'll take five minutes, cuz they're gonna be about the same, it should be pretty easy to fill in the rest once we do one. And yeah, so let's do warning. So let's go back to buttons.

[00:01:14]
Let's add a warning modifier. Warning, no curly brackets, so we're doing back-ticks. Okay, so it looks like our warning button needs a background color. I'm gonna set this to defaultTheme.status, cuz we now put it in that stop subject, dot warningColor. Our color, let's set that to defaultTheme status not status, this is just gonna be the textColorInverted, textColorInverted.

[00:01:50]
Now again, these are all gonna have hover focus and active states. So let's nest that in here. So & hover, and again, my hover and focus are the same, so I'm just going to use a comma and join those. So & focus. I'm gonna set background-color to defaultTheme.status.warningColorHover, warningColorHover.

[00:02:16]
I'm gonna set an outline to 3 pixels solid defaultTheme.status.warningColorHover. And I'm gonna give us an offset. I think actually, the offset is inherited already, so I'm gonna leave that out. If I need it, I'll add it, but I'm not positive then I do. And then the last thing is just active, & active.

[00:02:43]
So background-color, defaultTheme.status I can't spell, defaultTheme.status.warningColorActive. Okay, so theoretically, I have a warning modifier, and theoretically if I add it here, let's add it here. It should work, right? It looks like it works, okay? But there's a problem. What if I want this on my secondary button? Doesn't look too good, does it?

[00:03:35]
So the problem with this is that we are setting the background color. And by default, my buttons are ghost buttons, they don't have a background color. So one way around this is to set different modifiers for your secondary and tertiary buttons. That's what I'm gonna do today. However, one other solution would be the create an actual warning button, to create an actual warning secondary button or a warning tertiary button.

[00:04:02]
What I'm gonna do with this though is I'm going to set another modifier. So I'm gonna say warning, what do I call you, secondary warning? I'm gonna call you secondary warning. It didn't update, that's okay. So I'm gonna call you warning secondary. The difference here is that our secondary button does not have a background color.

[00:04:29]
So background, none. And we want our border color to be defaultTheme.status.warningColor. It's very tedious. And so what I would suggest. Here we go, secondary button warning and tertiary button warning. I've written these out for you. I'm not saying this is the best solution. This is the one we're gonna go with today.

[00:05:01]
So what this is doing is saying for a secondary button warning, these are the styles we need. As opposed to going and trying to like override things or creating individual buttons just for secondary warning, this is how I'm gonna do it, okay? So let me, you can go grab this from the notes.

[00:05:15]
So secondary button warning is going to have no background. It's going to have a border again. It's just gonna use our warning color instead of having a fill. That's our neutral color and it's gonna set the text color. Same thing for tertiary button. So now if I come back and I just say, this is a secondary button, I need this modifier.

[00:05:35]
The hover states are still messed up, but it shouldn't be. Let me go back. See, you know why? That's why. It looks a little ridiculous now because I've double set the border here. So the reason why is I was setting styles here on this base warning modifier, right?

[00:06:00]
And I'm only overriding certain CSS properties for the secondary button. I don't want a background on my secondary button, but I still need the hover and focus CSS here. So in my case, the way I've written this, I would need both warning and secondary button warning. There are definitely better ways to do this, but this is the one we're gonna go with right now, cuz it's very explicit.

[00:06:20]
So take the next five minutes, the error and the success are gonna be generally, basically the same, right? You're just gonna be changing warningColorHover to errorColorHover. Go ahead and add your error and your success states. And try to get them rendering in your UI. So try to get a success, a warning and an error button rendering.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now