Button States & Styles

[00:00:00]
>> So we had mentioned button states before, yhere's a lot of them, and this can be a little confusing, and so I've created a little chart for you to fill in. Let's quickly talk about different types of buttons before we do that. Your buttons should, first and foremost, look and function like buttons, right?

[00:00:16]
That's the biggest thing. There are different styles you can apply. You can have completely perpendicular edges. You can have ones with small amount of border radius. You can have full border radius. You could have a drop shadow, but they need to look and function like a button. So we've got solid buttons.

[00:00:33]
No surprise here. They're just filled with a solid background. These are pretty industry standard. This is, you would look at this and know it's a button. You might have heard of ghost buttons or line buttons. That just means that they don't have a solid background fill. I'm gonna show you an example of mine, my secondary buttons are ghost buttons.

[00:00:51]
Typically, the filled buttons are primary buttons because they draw the most attention. And actually, I heard during a conference that squared edges on buttons actually draw the user's attention more than rounded border radius buttons like round buttons because there's more pixels for the user's eye to be drawn to.

[00:01:07]
So that's just an interesting, fun fact. But ghost buttons yeah, you would typically see for a secondary button. We have icon buttons, so there are ones without labels which you need to add some aria to. Because without labels, assistive technology does not know what this is going to do.

[00:01:24]
If you can use a label, use a label please. We'll talk about that when we actually code these. So button styles. So border radius, we all know border radius probably. These are gonna be a little bit more playful than a traditional 90 degree perpendicular button edge. But think back to your brand identity, think back to your design principles.

[00:01:47]
If you wanna be bold and energetic, maybe border radius is fun to incorporate. If you're building something that's very professional, you might want to stick with square edges. Drop shadow is also cool. These give your buttons elevation. There is, Scott Tolinski made a great course about style components, design systems, and he talked about elevation.

[00:02:10]
You can have an elevation, library, utility function which is really fun and can give your buttons height. You can also implement the on hover and focus to indicate a state change. Let's talk about labels. We all love uppercase text, but it's really hard for our users to read.

[00:02:26]
Much harder to read than title case. So if you can use title case, I would recommend using title case. And your labels need to fit with the color contrast ratio, they need to be accessible. So you can see those bottom one is really hard for our users to see.

[00:02:39]
It does not pass the WCAG AA color contrast. And also when we're talking fonts for this, make sure it's thick enough. If you have a very, very thin font, it's not gonna be recognizable. The whole goal is if you were to turn off the color and decrease contrast, you should still be able to read your button and your UI.

[00:03:02]
So buttons need to be large enough to be clickable and accessible on mobile devices. And so you need to make sure that they have enough padding or enough width and height to do so. So a default button might have eight pixels top and bottom. Padding, a small might have 4 and a large might have 16.

[00:03:19]
When I create our design system at work, I use multiples of 4, increments of 4, for spacing. It plays very nicely and so you can see here we've got multiples of 4 for our top and bottom padding. And horizontal padding, you can add a horizontal padding to keep them responsive.

[00:03:36]
So if you set a width, it's not gonna be responsive but if you set padding, it's gonna be a little bit nicer. It's gonna play a little nicer. You can set minimum widths on these as well. So if you have just an icon button, you can make it min width 100 pixels, so it's not gonna be super tiny, still accessible.