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

The "A Practical Example" 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 gives the example of buttons, and explains that making decisions about buttons can be harder than one might originally think because of all of the parameters one has to think about when designing a simple button. A design system would simplify the process and provide guidelines for all teams involved.


Transcript from the "A Practical Example" Lesson

>> Let's take a practical example. If I haven't convinced you by now that this is important, let's talk numbers, engineers like numbers. So Nathan Curtis is a very prominent person within the design systems field. He has an excellent combination of blogs over on Medium. And he wrote a post called you thought buttons were easy.

So I wanna share some of the sentiments with you today. We all know what a button is. It seems really easy to build, probably the simplest, but we have to worry about padding, margin, border radius, background color, font size, font family, color, all these things. Right, and that's a lot, and buttons are one of the most frequently used components throughout your user interfaces.

But we're not just done once we examine background color and padding and all those things, we have to worry about different states of the button. So we have to worry about hover, focus, active, disabled states. And typically you're not just gonna have one button in your user interface.

You're gonna have multiple. So we need a secondary and tertiary button for all of those states. And of course icon buttons. You're gonna have buttons with just icons, which aren't great for accessibility, we'll talk about that, and you might have buttons with a label. We are gonna have primary, secondary, and tertiary buttons with an icon, so that's a lot And we have different sizes for different resolutions.

So we're gonna have small buttons and big buttons and then maybe status buttons, right? If you're gonna ask a user to delete their account, maybe, you might wanna use an error or a warning button. That's a lot, so if we add up all these different buttons, that's about 14 different button combinations, approximately, if my math is correct.

And if we have five different states, like hover, focus, disabled, and two different sizes, that's about 140 button combinations per theme. This is just for one theme. Imagine if we had three themes like high contrast mode or dark theme.

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