Building a Button Exercise

[00:00:00]
>> This is what should look like when you're done. Except yours is gonna look different, because you have a different font family, a different type scale. Well, the type scale is gonna be the same, you're gonna use paragraph fonts for all of the default buttons. Small buttons, you can use the typography that's right beneath the paragraph, I think I called copyright text, or helper text.

[00:00:18]
And then you could use an H5 for the large buttons here, this is what it should look like generally. So I've created this chart here for you. So, using your colors, so let me do an example. If you click R, that gives you a rectangle tool. You can draw a rectangle here.

[00:00:35]
And, you can see it's filled. So I'm gonna fill this with my primary color, I'm gonna do that by clicking these four little dots here and select one of my color styles. And so now that's changed. Then you can press T, and that'll give you text. You can click and it'll just start the cursor there, you can even draw a box if you want.

[00:00:52]
I'm gonna call this Submit, okay? And, I didn't add a text style, let me do that real quick. So if I create a new text style, I'm gonna call this, Paragraph. I've got a text style, I can go back to my button, I can highlight this text. If it's already linked to a text style, which it might be, you can unlink it here.

[00:01:15]
And then you can open this and select Paragraphs. Now it's my paragraph text, okay? And, so I want you to just play around with this. You can add some border radius, that's gonna be this little thing up here. You can add some border radius, you can make them fully round, you can make them square.

[00:01:30]
Just make sure that, this label obviously is not gonna pass color contrast, it's gonna be too dark. So, I wanna actually give this a text color inverted. I'm gonna create this text style, we'll call you. Text, no, see, this is what happens if you don't double-click and highlight the box, it's gonna be really hard to add that color.

[00:01:51]
So, text color inverted. Now I can go to my button and say, okay, this is a little too dark. Let me give this a color of, text color inverted, and there you go. So take the next, let's say 30 minutes, this is gonna take a little bit longer.

[00:02:05]
Take the next 30 minutes and create a chart that looks just like this. And for the warning, error, and success, you should have grabbed those from here, which I've already given to you.