Avatar

React SDK guidance for Avatar.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

Import path: @enadhq/enad-react-sdk/client/ui-resolver.
Live playground: /components/base-ui/avatar.

When to use it

Use Avatar anywhere a person, reviewer, or account needs a compact visual identity. It fits naturally in account menus, testimonial cards, review summaries, and team or author lists.

The component is intentionally simple. Most of the final look comes from the surrounding layout, the chosen size, and the fallback content.

Slot strategy

Avatar is the outer frame.
AvatarImage renders the real image when one is available.
AvatarFallback gives you initials, a short label, or an icon when the image is missing.

Always provide a fallback. It keeps the UI stable and still communicates identity when the image does not load.

Behavior and theming guidance

Set size on the root with layout classes like size-8 or size-10 instead of rewriting the internal structure. Keep fallback text short so it stays legible at small sizes.

For accessible use, give the image a meaningful alt when it adds identity. If the nearby text already names the person, keep the alt brief and avoid repeating long labels.

Contract scope