 Hello everyone, in this video, we'll be taking a look at buttons and icons in Ant Design. So this is where we left off in our previous video, we just had a little basic button here and I'm going to actually style this button in this video. So right now the button is stuck to the top left corner of my screen, I'm just going to do some styling to make it not stuck to the screen. And I'm just going to do style equals to let's say margin, I'm going to do something a little crazy here and let's say 500 pixels. By the way, the styling here, it's actually not specific to Ant Design, this is just a react styling. So you can see now we get that button a little more in the middle of the screen. So in the previous video, the button that I created has the type of primary, but if I hover on type here, you can see that it is a JSX attribute with a link text goes primary or default or dashed. So we can change this and take a look at what they look like. So I can change the type to dashed and these are just the types that Ant Design provides to us that we can use in our button. So this is the dashed type of button, we can change this to text, then this will just be a text button, we can change this to a link. And this is going to be how the link button looks like. So I can hover on this and can see that it's much more this ghost and that's default that we can use too. So I'm going to change this back to primary. So the next attribute we're going to look at is size. So the size attribute can take in large, middle, or small. So we can create like large buttons with this and then this button is going to be larger. So we can change this to a small button and then you can see the button becomes smaller. So you can change the sizes here. I'm going to leave this at large so we can see the button better. And the next attribute I'm going to show you is actually a pretty cool attribute and it's called loading. So you just have to add loading in here. And when I save this, you can go and look at the button and you can see it is currently in a loading state. And when it's loading, you can't really click on it. So that's the loading state of the button. And of course, when you're working on an actual project with React, you would set the loading in your component state so you can dynamically change the loading state of the button. The next thing is block. The block attribute will make the button fill up the entirety of the parent's width. This is actually our viewport width. You can see that the button is filling up the entire screen. And the reason it's queued over like that is because I added that margin of 500 pixels that's why it is sideways here. I'm going to get rid of that because it looks really ugly. And there's also a new type of attribute in NDesign 4.0 and that is the attribute called danger. So the danger button just looks red and it's more intimidating to click on it. So that's the danger attribute. We also have disabled. So disabled will disable the button so you can click it and you can look at the cursor. The cursor is giving us feedback and telling us that we should not click on this button. The previous four attributes that I showed you that was loading, block, danger and disabled. Ideally, these attributes should be stored in your state so that you can dynamically change the attribute of your component on the fly. So that's pretty much the basics of buttons, but now let's talk about icons. So NDesign provides us with a set of default icons. It's actually quite a huge set of icons. Of course, you can use other icons in your React application. You can use React-icons. But to use NDesign's icons, we all first have to install it like with this command here. So you can use NPM of course, but I'm going to use yarn. So NDesign dash slash icons. So let me stop the server here, yarn at N dash design slash icons. So I'm going to wait for it to run here. And it's done. So I'm going to yarn start again to restart the server. Now notice that if I had not add this browser equals to none environment variable, it would pop up a new tab in my browser and it's going to be annoying to keep closing so many browser tabs. So it's just something that you can add in your package.json file. So one way to use icons in NDesign would be to put it inside of a button. So let me import one of these icons here. Let's take a look. We can import this plus outline button. So to import it, we just click on this icon in the documentation here and then it will copy that components name to our clipboard. Let's go back to our VS code here and import that. So I'm going to import this from N dash design dash design slash icons. And we have to get rid of this opening and closing tags because that's just the name of the component. It's not the actual component itself. To put that icon into our button, we can just add icon equals to and then curly braces and plus outline. So this will add the icon to our button and I'm going to go back to my browser here and refresh this. Now another way that you can do this is to take this icon attribute, delete that. We can put that icon component as a child component of our button component. Let me save that and you can see that it works. I can add text here, let's say add new, actually create new record. You can save that and you can see create new record so it works perfectly. And just for fun, let's change the icon here. I'm going to get a plus circle outlined icon and I'm going to paste that in here. So when I paste this, it's going to give us squiggly lines because this is not important. So we have to import that from and design slash icons. Let me save that and let's refresh this and you can see that we have that new icon here and you can change as many icons as you want. You can also change this button type to danger and then this will become red. So there's just a lot of things that you can do. Just remember that if you want to change this on the fly, you have to use react states and maybe react hooks to help you change these buttons on the fly. So that was and designs buttons and icons. And in the next video, I'm going to show you how you can use the typography component in and design to customize your text and make titles and give styles to your texts.