Avatar

Avatar defines how EnterUI handles image and fallback identity primitives, including default structure, accessible states, and token-driven styling.

#Default usage

Avatar sizes

Fallback initials stay legible without becoming decorative.

FDEUEUUI

<HStack gap={12} wrap>
  <Avatar size="sm"><AvatarFallback>FD</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>EU</AvatarFallback></Avatar>
  <Avatar><AvatarImage alt="EnterUI logo avatar" src="/icon.png" /><AvatarFallback>EU</AvatarFallback></Avatar>
  <Avatar size="lg"><AvatarFallback>UI</AvatarFallback></Avatar>
</HStack>

#Import

import { Avatar, AvatarFallback, AvatarImage, HStack } from "@froggdesign/enter-ui-react";

#Image loading and recovery

In both React and SolidJS, place AvatarFallback after AvatarImage. The fallback stays visible while the image loads and when it fails. A loaded image becomes visible and hides the following fallback. Changing src retries loading a new image; native onLoad and onError handlers still run.

#Accessibility

AvatarImage requires alt. Use fallback text that remains meaningful when the image is unavailable.

#API

• Avatar: size="sm", size="md", or size="lg".
• AvatarImage: requires alt.
• AvatarFallback: use initials or a short label.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.