In this lesson, we’ll take a look at how to use the Avatar component in Chakra UI.
⭐⭐ Watch the whole course now (without ads) on Net Ninja Pro:
https://netninja.dev/p/chakra-ui-crash-course
?? Access the course files on GitHub:
Course files –
?? React Tutorial:
On Net Ninja Pro –
On YouTube –
?? React Router in Depth Tutorial:
On Net Ninja Pro –
On YouTube –
?? CSS Flexbox Tutorial:
On YouTube –
?? CSS Grid Tutorial:
On Net Ninja Pro –
On YouTube –
?? Chakra docs –
?? VS Code –
All right then so in this lesson we're Going to take a look at the Avatar Component which allows us to Output Little avatars like this right here the Dead dead simple to use now in our Project we want an avatar up here and We're going to also apply some kind of Avatar badge to that as well but also we Want avatars in each of these projects In each of these task cards so let's Start with these cards right here and to Do that we need to go to the dashboard Page now we have this right here which Is being used as an avatar at the minute We want to replace that with an avatar So let's delete the text and instead in Fact we'll delete the Box we don't need The box to surround the Avatar so let's Say Avatar we'll use that component Let me click on this to import it And inside the Avatar we need a source Prop so let's say source is equal to Something now in our case that is going To be found on the task itself if we go To the data we can see that each task Has an image property and that's some Kind of path to an image that we want to Use so we can just say task dot IMG like So and now the source of this Avatar Should be that image but if we take a Look at those images then they're very Big squares let's go to these images Right here so what chakra does is reduce Those and it just Clips them to make a
Circle of the center of the image so Let's save this and preview over here And now we can see a little avatars of Each one of these right here where we Don't have a valid path it just gives us This default thing right here So if I go to the Json over here in one of these you see I've deliberately misspelled it so it Should be Peach but it's Peak and that's Where we get this default Avatar if I Change this back to Peach it should work If I refresh Yep so now it's Peach awesome so that's Avatar's dead simple to use let's also Create an avatar up here but also have a Little badge on it which could be used To show some kind of notifications so Let's go to the navbar to do that So I'm going to scroll down here a Little bit to where we have this hdac This is what we're using as the kind of Dummy Avatar at the minute let's get rid Of that and instead use the Avatar Components now remember for the Avatar We need a source so let's set that Source equal to forward slash image Forward slash let's just use Mario Because that's what the email is dot PNG So let me save that and preview so far To see if we get that Avatar we do I Want to show you one quick thing Actually you know like I showed you a Minute ago if we don't have a correct
Path and the image doesn't exist then we Get this kind of default thing right Here well instead what you can do is you Can pass through a name prop so I could Say the name of this person is Mario Right Now if I do that and save it instead of That default Um Avatar we get the M instead now you Can't see the circle because I think the Circle is the same background color as This background so let's change the Background of this as well because you Can say BG is equal to some kind of Color so I could say purple like so and We should see that that's a purple Avatar now doesn't look great but I just Wanted to show you that is another way We can use fallback options so Change that back to Mario for now and Take a look yep it's there I also want a Little badge over here to see how many Notifications I might have now the way We do that is by using an avatar badge So inside the Avatar if we don't make This self-closing so let's Close it like so now we get an avatar Where we can place content inside and What I'll do is use the avatar Badge component Okay now if I do that and just save it Let's preview this we don't really see Anything but if we go over here we can Style this a little bit so what I'll say
Is the width of this badge is 1.3 M's And then the oops That needs to be equal not colon Sort that out and then also the Background is going to be equal to teal And then we'll use strength 500. save That and preview and we can see this Kind of squashed little badge right here But if we place content inside this now So if I say I want to use a text Component and we'll set the font size of This to be small so font size is equal To extra small in fact And inside we'll just do three we also Want to make the color of that text White so it stands out more so color is Equal to White like so now since we have Content inside it it will have a height And we get that little badge awesome so That looks pretty cool right so that my Friends is how simple it is to create Avatars and Avatar badges in the next Lesson we're going to take a look at That default theme we've talked about a Little bit and how we can change that Default theme as well
