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.

FDEUUI

<div className="docs-preview-row">
  <Avatar size="sm"><AvatarFallback>FD</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>EU</AvatarFallback></Avatar>
  <Avatar><AvatarImage alt="EnterUI logo avatar" src="/icon.png" /></Avatar>
  <Avatar size="lg"><AvatarFallback>UI</AvatarFallback></Avatar>
</div>

#Import

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

#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.