How to use Ant Design Button component in ReactJS | Ant Design Button Tutorial

welcome back this is a continuation of last video in last video we integrated the end design and started exploring its components if you have not seen in that video i have added the link in the i button and in the description below so please go through that video so that the ground is set up if you have done that video so you are all set let's continue in this video we will explore the button component of end design a little bit more so let's import the button component from and design all right and let's display a button saying my first button and here you go my first button and now let's explore its different props the first prop is with exploring is the type you can search different types to dash default what is right showing right now the codes the link and the primary and the primary it will show a blue button and in the link it will act as a link and no it is not the it does not have the background and if it is a link we can also pass the href so that when it is clicked it will navigate to that web page so let's add one suppose google.com and if you hover on it it is showing that it's actually acting as a link so google.com is shown here if you click on it it will move to the google.com all right so let's make it back to primary to explore it it's few more properties suppose you want it to have the full width of the its parent for that we can add a block property there you go and next if you want to add an action on this button so that you can call an api or act upon it so for that we need to implement its own click method suppose on click once you're on button click let's add that function button click and for now let's console button clicked and it need to be an error function just save it and if you click on it it is showing that button is clicked and let's proceed a little bit further suppose on button click you want to make an ap call and we want to show a loading here while the ap call is in progress so for now let's mimic the behavior and by adding a state to show while they recall is made it is it will be showing the loading so by default it will be false and once button is clicked we will set the loading to to do and and in actual implementation you will make an ap call here and it will uh it will return a response and in the in the resolver then the reject you will set the loading to false for now let's mimic the behavior and after two second we set the loading to false so i used it is not imported but sorry use date from andy sorry from react okay and we need to show the loading here so it will show loading based on our state so click on it it is showing loading two seconds and it again it's reloading and after two seconds it removes loading now let's do some customization in the button suppose we want to add an custom icon here so let's try to import few icons from the end design they have provided a lot of icons you can explore them on their website suppose we want to add a power of outline icon and that the prop we will use will be the icon and it need a component the power of outline component but i can save it and here you go we have added a custom icon and let's do some more customization let's change the background color to something suppose orange and here you go and suppose we want to change that the foreground color to suppose red here you go and we can do the same thing from this the classes as well so let's try to add a class you can see the my button class and let's remove this so that we are back to the normal button condition okay and let's implement this my button plus css the background colors the same orange and the color to be sorry the color to be right here you go and that's it for the exploration of the button component from and design if you have any question please let me know in the comment section below and if you like the video please hit like and subscribe to the channel to get more videos like this one in the next video we will explore some other component from and design see you there thanks for watching

Channel: CodeWithAamir

Views: 26,480

Keywords: ant design components in reactJS website, how to use Button component of ant design, User Input interaction, action button, submit action, antd react, antd reactjs, antd button, add icon to antd button, loading button, antd button spinner, antd button background, antd button css class, codewithaamir, antd reactjs tutorial, Ant Design Button Tutorial, How to use Ant Design Button component in ReactJS, antd primary button, antd link button, antd button link href, ant design

Id: -R2nRzsytig

Length: 7min 51sec (471 seconds)

Published: Mon Mar 22 2021