Skip to main content

Avatar

Avatar Component

Create beautiful designs using the avatar component.

logo
logo
logo

Example Usage

import { Avatar } from "react-chat-elements";

<Avatar
src="https://avatars.githubusercontent.com/u/80540635?v=4"
alt="avatar"
size="xlarge"
type="rounded"
/>;

Result

avatar

Avatar Props

propdefaulttypedescription
srcnoneimageimage src
altnonestringimage alt description
sizedefaultstringimage size. default (25px), xsmall(30px), small(35px), medium(40px), large(45px), xlarge (55px)
typedefaultstringtypes: default, circle, rounded(border radius 5px), flexible
letterItemnoneobjectavatar to be a letter
sideElementnonecomponentavatar side element
onErrornonecomponentavatar img onerror
lazyLoadingImagenoneimage pathlazy loading image
classNamenonestringclassName for optional Avatar