Avatar

Avatars are UI elements that stand as a graphical representation of a person through a profile picture or image, an icon, or a string with initials.


Props

Avatar properties

PropertyDescriptionTypeDefaultVersion
bgFallback color incase image fails to loadstring-
colorSets the color of the initialsstring-
fitObject-fit property of the imagefill contain cover none scale-downcover
iconCustom icon typeReactNodenull
imageSrcLink to image sourcestring-
imageAltDescription of the imagestring-
initialsSizeSet font size of initialsnumber16
shapeShape of the avatarcircle squarecircle
sizeHow large should the avatar be?large medium small tiny numbersmall
storiesMake avatar look like storiesbooleanfalse
usernameUsername for setting avatar initialsstring-

Usage

Unless where using an icon always provide the imageSrc and imageAlt props

Base

Types

Sizes

Shapes

Icon

Initial

Stories

Instragram stories style Avatars