A Practical Example

[00:00:00]
>> 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.

[00:00:18]
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.

[00:00:41]
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.

[00:00:55]
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.

[00:01:19]
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.

[00:01:38]
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.