Code

API

This component extends the native <div> API, for example, the title attribute.

Props	Types	Required
children	string	✅
size	'default' | 'small' | 'large'	❌
status	'none' | 'online' | 'busy' | 'away' | 'ringing' | 'onCall' | 'onExternalCall' | 'recovery'	❌
profilePic	string	❌
icon	AvailableTelicon	❌
showicon	boolean	❌
shape	'circle' | 'square'	❌

children

In this case, just a string is passed to the element. Normally, a full name, but only the initials are rendered.

size

The size prop handles the width and height of the avatar element.

status

The status prop controls the icon rendered inside the avatar component showing its state.

profilePic

In case there is a profile picture, this can be passed a string and this will replace the avatar default initials.

icon

To render a custom icon.

showIcon

To hide default/custom icons.

shape

To modify the avatar's shape. Choose between circled and squared.

Example

Live Demo

Code Sandbox

https://codesandbox.io/p/sandbox/avatar-jc2n5s?file=/src/App.tsx:1,1codesandbox.io