Code

Props

Props
Data Type
Required

children

string

βœ…

className

string

❌

size

string

(Default, Small, Large)

❌

status

string

(Online, Busy, Away, Ringing, OnCall, OnExternalCall, Recovery, Offline)

❌

altStatusText

string

❌

profilePic

string

❌

tooltip

boolean

❌

Username and Profile Picture

If the Avatar component is not receiving a profilePic URL, it will show the username initials and a color background based on the username string. This default setting means that the background color will always be the same for a specific username, and it should not display different colors in re-renders.

No profilePic url facilitated

Working profilePic url

Example

<Avatar
  altStatusText="Alternative Status Name"
  className="avatarExample"
  profilePic="https://i.pinimg.com/originals/c9/b4/65/c9b46554f9e672374a93dc81ebd799ab.jpg"
  size="Default"
  status="Online"
  tooltip
>
  Jhon Doe
</Avatar>

Components Dependency

For this component elaboration, the following internal components were used:

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.​

React

Last updated