الصورة الرمزية

الصورة الرمزية component for building consistent, accessible interfaces.

Loading demo: avatar-real-world

التثبيت

npx sdaia-ui@latest add avatar

Use Avatar consistently across your product following the usage guidelines and spacing rules defined in the design system.

الصورة الرمزية displaying a user profile photo.

Loading demo: avatar-image

الصورة الرمزية showing user initials when no photo is available.

Loading demo: avatar-initials

الصورة الرمزية with a generic person icon as a fallback.

Loading demo: avatar-icon

الصور الرمزية متاحة بمقاسات XS وS وM وL وXL وXXL وXXXL.

Loading demo: avatar-sizes

Choose between دائري and مدوَّر square shapes.

Loading demo: avatar-shape

خصائص مكوّن Avatar.

Prop	Type	Default	Required
size	'sm' \| 'md' \| 'lg' \| 'xl'	'md'	optional
type	'initials' \| 'icon' \| 'image'	'initials'	optional
shape	'round' \| 'square'	'round'	optional
initials	string	-	optional
src	string	-	optional
alt	string	''	optional
icon	ReactNode	-	optional
statusDot	boolean	false	optional
background	boolean	true	optional
border	boolean	true	optional