Avatar

Avatars identify people or entities with a photo, initials, or generic fallback. Size variants keep them proportional in lists, bylines, and toolbars.

Try it

Usage

Set src and alt when a photo is available. Use fallback for initials when the image fails to load or is not provided.

import { RuiAvatar } from '@ecopages/radiant-ui/avatar';
 
<RuiAvatar src="/avatars/jane.jpg" alt="Jane Cooper" fallback="JC" size="md" />

Meaningful fallback text

Limit fallback to one or two characters derived from the person's name. Avoid arbitrary symbols that do not identify the subject.

Pick size for context

Use sm in dense tables and comment threads, md in bylines and menus, and lg in profile headers.

Theming

Avatar chrome maps to semantic surface roles, never Tailwind palette steps:

Override at the theme layer, not in component CSS.

Accessibility

• Always provide alt text when src is set so the image is described to screen readers.
• When showing only initials, ensure surrounding text names the person; the avatar itself may be decorative.
• Do not use avatar color as the sole indicator of user role or status.

API

RuiAvatar is a presentational JSX view, no custom element. Pass src for an image, or fallback / alt for initials.

Props

CSS classes

Public BEM classes (documented via @cssclass):

Theme roles