Avatar

An image element with a fallback for representing the user.

CNCN

Installation

npm

npx @galaxy-stack/nebula-cli@latest add avatar

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add avatar

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add avatar

bun

bunx @galaxy-stack/nebula-cli@latest add avatar

global

# If you have installed galaxy-design globally
galaxy-design add avatar

Usage

API Reference

Props

Prop	Type	Default	Description	Frameworks
src	string	-	Image source URL	AvatarImage (All)
alt	string	-	Alternative text for the image	AvatarImage (All)
className	string	''	CSS class names for the avatar root	Avatar (React, React Native)
class	string	''	CSS class names for the avatar root	Avatar (Vue, Angular, Flutter)

Subcomponents

Avatar

Root container for the avatar component

AvatarImage

Image element with fallback support

Prop	Type	Default	Description	Frameworks
src	string	-	Image source URL	All
alt	string	-	Alternative text	All
asChild	boolean	false	Render as a child element	React, Vue, Angular

AvatarFallback

Fallback content when image fails to load

Prop	Type	Default	Description	Frameworks
delayMs	number	600	Delay in milliseconds before showing fallback	React, Vue
asChild	boolean	false	Render as a child element	React, Vue, Angular
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

Accessibility

• Keyboard Navigation: [TODO]
• Screen Reader: [TODO]
• Focus Management: [TODO]
• WCAG Compliance: WCAG 2.1 Level AA compliant

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)