Quasar comes with a massive material design component library and it's gorgeous. So before we push on, let's have a play with the cube button component to get a feel for how this library works. First of all, we can change the size. And Quasar comes with five sizes that it uses across different components.
We have extra small, small, medium, which is going to be the default, large, and then extra large. So that's how we can change the size. We can also be more specific. 2 EM.
That's also going to work, but we'll leave it at extra large for now, just so it's a bit easier for you to see. We can also change the color, of course. So you've already seen the red color here, but notice that if I cross that out and then do control space, we get some really nice auto completion here. If I'll set up correctly for you.
then you should be able to see this list. They're the colors that Quasar gives us out of the box. dev slash style slash color palette. And of course, you could probably search this in the Quasar docs to find it quickly.
Let's come down here and you can see we get a whole bunch of the colors that are available to us, including some related to success, for example, positive, and negative, but we are going to cover a few of these things later on in the series. So let's push on for now. And I might change this to deep purple nine. So that last number is the brightness of the color.
Anything from one through to 10 is how bright that color will be. We also get some accent colors. Anything from 11 to 14 are our accent colors. So 11 through to 14.
And again, you can go to the color palette section to get an idea of what those accent colors look like before you choose one. Okay, what else can we do? We can also change the kind of button. Now, by default, notice that we have a little bit of a shadow around the button and a solid background.
We can also say here, outline, to have an outline button. Flat, and notice when you hover a flat button, you can still see the shape of it. So this is something that's a little bit more understated and unelevated. Unelevated doesn't look much different.
It just means that it's flattened out, but still has that nice purple background. So if you prefer more of a flat design, you might want to use unelevated for your buttons rather than the default that gives you that little bit of shadow. So that's good to know. What else can we do?
Well, we can change the roundness of the button. If we say rounded here, it curves the edges. I think that looks pretty good. And we can also say round.
So notice there's a difference between rounded and round. And round doesn't really look very good by default because it's mostly designed for things like icons. So if we get rid of all of this text here and leave it as a H, you can see that does look a little bit better when there's less inside the button. Speaking of icons, we can say here icon is equal to book, and Quasar is going to use the material library by default.
Let's just get rid of the label so that looks better. There are of course ways that you can choose your own icon library, but we'll be covering icons in more depth later on in this series. Next, let's have a look at the default slot. So I'm going to get rid of this icon, crack open this button, and let's just put some text in there like the letter T for example.
So you can see that the default slot just throw something inside of the button as you'd expect. And this is particularly useful for things like floating badges. So if we say Q dash badge here to use Quasar's badge component, we can say floating to make it a floating badge, give it a color of red, and how about we put a number in there like 88. And now we've got this badge that says, for example, you have 88 new books or whatever.
So we came back here and added that icon back in. And now it looks like you have 88 book notifications. Pretty cool stuff. So there you have it, a basic rundown of how Quasar's components work.
And of course, we'll be covering a few more components throughout this series.