Avatar

Quick start

Hover avatar component can be used to display profile pictures. It supports images, icons or letters. Here's a quick start guide to get started with the avatar component

Importing Component

import { Avatar } from "@hover-design/react";

Code Snippets and Examples

Avatars with Image

<div class="App">
    <Avatar src="./images/avatar1.png" alt="avatar1"/>
    <Avatar src="./images/avatar2.png" alt="avatar2"/>
    <Avatar src="./images/avatar3.png" alt="avatar3"/>
</div>

Avatars without Image

<div class="App">
  <Avatar size="lg" color="#4f5d73">J</Avatar>
  <Avatar size="lg" color="#4f5d73">RA</Avatar>
  <Avatar size="lg" color="#4f5d73">+3</Avatar>
</div>

J

RA

+3

Avatars with sizes

<div class="App">
    <Avatar size="xs" src="./images/avatar.png" alt="avatar"/>
    <Avatar size="sm" src="./images/avatar.png" alt="avatar"/>
    <Avatar size="md" src="./images/avatar.png" alt="avatar"/>
    <Avatar size="lg" src="./images/avatar.png" alt="avatar"/>
    <Avatar size="xl" src="./images/avatar.png" alt="avatar"/>
</div>

Avatars with shapes

<div class="App">
  <Avatar borderRadius="xs" size="xl" src="./images/avatar.png" alt="avatar"/>
  <Avatar borderRadius="sm" size="xl" src="./images/avatar.png" alt="avatar"/>
  <Avatar borderRadius="md" size="xl" src="./images/avatar.png" alt="avatar"/>
  <Avatar borderRadius="lg" size="xl" src="./images/avatar.png" alt="avatar"/>
  <Avatar borderRadius="xl" size="xl" src="./images/avatar.png" alt="avatar"/>
</div>

AvatarGroups

<div class="App">
    <AvatarGroup gap="xs">
    <Avatarsize="lg" src="./images/avatar1.png" alt="avatar1" />
    <Avatarsize="lg" src="./images/avatar2.png" alt="avatar2" />
    <Avatarsize="lg" src="./images/avatar3.png" alt="avatar3" />
    <Avatar size="lg" color="#4f5d73" >+5</Avatar>
  </AvatarGroup>
</div>

+5

Avatar Props Referece

Attributes	Values	Optional ?
src	string	Yes
alt	string	Yes
borderRadius	xs sm md lg xl number	Yes
size	xs sm md lg xl number	Yes
color	string	Yes
textColor	string	Yes
ref	RefObject<HTMLButtonElement>;	Yes

Avatar.Group Props Referece

Attributes	Values	Optional ?
children	React.Children	No
gap	string	Yes

---

Note: As of now any custom props (classNames, html attributes, etc) added, will be applied only for the wrappers and not for the img tag.