Avatar

import { Avatar, AvatarImage, AvatarFallback } from '@elirobinson/react/components/atoms/Avatar';

import { Avatar } from '@elirobinson/react/components/atoms/Avatar';

export default function Basic() {
  return <Avatar alt="Jordan Casey" fallback="JC" />;
}

When to use it

Use Avatar to identify a person or account — a client roster, a comment thread, a user menu. It's a circle crop, so it suits photos and initials, not logos: a rectangular mark gets distorted by the crop. Pair it with a visible name wherever it appears; don't make the avatar carry identification on its own.

Sizes

import { Avatar } from '@elirobinson/react/components/atoms/Avatar';

export default function Sizes() {
  return (
    <div className="demo-row">
      <Avatar alt="Priya Shah" fallback="PS" size="sm" />
      <Avatar alt="Priya Shah" fallback="PS" size="md" />
      <Avatar alt="Priya Shah" fallback="PS" size="lg" />
    </div>
  );
}

With a photo

src and the initials fallback aren't linked at runtime — Avatar doesn't detect a failed image load and swap to fallback for you. If src is set, the <img> renders unconditionally.

MW

Show code

Copy

import { Avatar } from '@elirobinson/react/components/atoms/Avatar';

export default function WithImage() {
  return (
    <div className="demo-row">
      <Avatar src="https://i.pravatar.cc/80?img=12" alt="Marcus Webb" fallback="MW" size="lg" />
      <Avatar alt="Marcus Webb" fallback="MW" size="lg" />
    </div>
  );
}

Props

Accessibility

• When src is set, alt becomes the <img>'s accessible name — always pass a real name, not a filename or generic string.
• When there's no src, the initials render inside a <span aria-hidden="true"> and the wrapping <div> carries no accessible name of its own. A fallback-only avatar is effectively invisible to screen readers unless you add aria-label yourself or the name is already visible next to it.
• AvatarImage and AvatarFallback are exported alongside Avatar for custom layouts, but they're standalone primitives — Avatar doesn't render them internally, and they don't coordinate with each other. Building a custom composition means supplying your own wrapper and sizing.
• The ref forwards to the outer <div>.

Related