Tailwind CSS Avatar - Taco Vue

The Avatar is used to portray people or objects on web projects - a visual identifier for a user profile. Below we are presenting a dynamic example of the Avatar component that you can use in your project.

Avatar
<Avatar 
    src="https://docs.material-tailwind.com/img/face-2.jpg" 
    size="md" 
    variant="rounded" 
>
</Avatar>

Avatar Variants

The Avatar component comes with 2 different variants that you can change it using the variant prop.

AvatarAvatar
<Avatar 
    src="https://docs.material-tailwind.com/img/face-2.jpg" 
    size="md" 
    variant="rounded" 
/>
<Avatar 
    src="https://docs.material-tailwind.com/img/face-2.jpg" 
    size="md" 
    variant="circular" 
/>

Avatar Sizes

The Avatar component comes with 6 different sizes that you can change it using the size prop.

AvatarAvatarAvatarAvatarAvatarAvatar
<Avatar 
    src="https://docs.material-tailwind.com/img/face-2.jpg" 
    size="xs" 
    variant="rounded" 
/>
<Avatar 
    src="https://docs.material-tailwind.com/img/face-2.jpg" 
    size="sm" 
    variant="rounded" 
/>
<Avatar 
    src="https://docs.material-tailwind.com/img/face-2.jpg" 
    size="md" 
    variant="rounded" 
/>
<Avatar 
    src="https://docs.material-tailwind.com/img/face-2.jpg" 
    size="lg" 
    variant="rounded" 
/>
<Avatar 
    src="https://docs.material-tailwind.com/img/face-2.jpg" 
    size="xl" 
    variant="rounded" 
/>
<Avatar 
    src="https://docs.material-tailwind.com/img/face-2.jpg" 
    size="xxl" 
    variant="rounded" 
/>

Avatar Custom

Avatar
<Avatar 
    src="https://docs.material-tailwind.com/img/face-2.jpg" 
    size="md" 
    variant="circular" 
>
</Avatar>