Avatar

In progress
RTL

The Avatar component is typically used to display images, icons, or initials representing people or other entities.

Avatar

Default

Variants

md

Rounded

md

Custom colours

Sizes

xs
sm
md
lg
xl
2xl

Active status

md

Status origin

Avatar props

NameTypeRequiredDefaultDescription
bgColorstringNobg-gohanBackground colour
colorstringNotext-bulmaText colour
imageUrlstringNo-Path to the image
isRoundedbooleanNofalseRounded border radius
isStatusActivebooleanNofalseActive state of status indicator
namestring | JSX.ElementNo-Capital letters of name
sizexs | sm | md | lg | xl | 2xlNomdSize of avatar
statusOrigin{ vertical: 'top' | 'bottom', horizontal: 'left' | 'right' }No{ vertical: 'bottom', horizontal: 'right' }Position for status indicator