The Avatar component displays a user’s profile picture, or their initials when no image is set.
Importing the Avatar Component
To use the Avatar component in our app, we need to import it from our styled components. Here’s how we can import it:
import { Avatar } from "StyledComponents";
Using the Avatar Component
The Avatar component can be used with various props to control its appearance. Here are some examples of how we can use it:
<Avatar
url={company.logo || logo}
/>
<Avatar
name="Hello Moto"
/>
<Avatar
name="Hello Moto"
initialsLetterCount={1}
/>
<Avatar
classNameImg="mr-5"
classNameInitials="lg:text-5xl text-lg font-bold capitalize text-white"
classNameInitialsWrapper="mr-5 bg-foreground"
initialsLetterCount={1}
name={company.name}
size="h-10 w-10 lg:h-20 lg:w-20"
url={company.logo || logo}
/>Avatar Component Props
| Name | Description | Default Value |
|---|---|---|
url | Provide the url of the logo | "" |
name | Pass any name or string value, so that it will display the avatar with initials. | "" |
initialsLetterCount | Number of initials to appear in the avatar if the name is provided instead of url | 2 |
size | Specify the size of the avatar. | "md:h-10 md:w-10 h-6 w-6" |
classNameImg | Specify the style classes needed avatar image | "inline-block rounded-full" |
classNameInitials | To provide external classnames for the initials styling. Should be a string. | "md:text-xl text-xs md:font-medium font-light leading-none text-white" |
classNameInitialsWrapper | To provide external classnames for the initials wrapper styling. Should be a string. | "inline-flex rounded-full items-center justify-center bg-gray-500" |
style | Custom css styles which are not the part of tailwind. | "" |