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:

• Telicon

Live Demo

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

React

General Components / Avatar - Basic Avatar ⋅ Storybooksipster-react-component-storybook.netlify.app