Check out a free preview of the full Design Systems with React & Storybook course:
The "Button Variations Solution" 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:

Emma explains the solution to the button variations exercise.

Get Unlimited Access Now

Transcript from the "Button Variations Solution" Lesson

>> Let's take a look. So we've got we had our warning before. And now we've got a primary button error, a secondary button error, a tertiary button error, and then just a base error class is going to actually set like all of the hover active, and should be also focus in here.

[00:00:14] It's gonna set the state since they're all the same, just add that there. These are exactly the same as what we just did. So we don't need to spend too much time going over it. I also added a couple of modifiers so I should have a small error primary button.

[00:00:28] I should have a large warning secondary button and I should have a success treasury button. And when I come in here I can see that all of the styles are being applied appropriately, okay. So like I mentioned, this is probably not the best way to do it, this is one way to do it.

[00:00:43] And if you have other solutions, feel free to let me know. I always like to learn about different ways that we can help apply these styles for some of these statuses to secondary and tertiary