Avatar

ARIA
RTL

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

Avatar

Default

Variants

md

Sizes

xs
sm
md
lg
xl
2xl

Active status

md

Status origin

Customization

Avatar props

NameTypeRequiredDefaultDescription
classNamestringNo-Tailwind classes for customization
imageUrlstringNo-Path to the image
sizexs | sm | md | lg | xl | 2xlNomdSize of avatar

Avatar.Status props

NameTypeRequiredDefaultDescription
classNamestringNo-Tailwind classes for customization
position{ vertical: 'top' | 'bottom', horizontal: 'left' | 'right' }No{ vertical: 'bottom', horizontal: 'right' }Position for status indicator