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

The "Building a Button 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 demonstrates how to build a primary and a secondary button. Primary buttons are for the most important actions on a form, secondary buttons are for less importants ones.


Transcript from the "Building a Button Solution" Lesson

>> The first thing I want you to do is, hopefully, you have a primary button in a default state. Go ahead and select that entire button and right click on it and you'll see this option that says Create Component, where is it? Mine's already component. Let me do this on another art board.

Okay, I have my little button here. Select both the text and this rectangle and you can create a group out of this, okay? So if you're on a Mac, its Command G, or probably Ctrl G on a Windows, I would assume. So now that we've got this group, you can double click on the label and say primary button default.

And once you do that, you can right click, and it says Create Component here. So if you click Create Component, you'll see this turns purple now. And if we're now on the left side, there's a toolbar that says Asset. You can see here we've got our components. So what that means is we can actually drag these out.

We can create new instances of our buttons now, and that's really great. You're welcome to do that with all your buttons. But right now we just need a primary and default state, okay? And we're gonna use this, we're gonna use this to create a module.

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