Avatar

<>
  <Avatar>
    <AvatarImage src="/favicon.svg" alt="Zenox" />
    <AvatarFallback>ZX</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarFallback>MR</AvatarFallback>
  </Avatar>
</>

Usage

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@zenoxai/ui/components/avatar"

export function UserAvatar({ user }: { user: User }) {
  return (
    <Avatar>
      <AvatarImage src={user.pictureUrl} alt={user.name} />
      <AvatarFallback>{user.initials}</AvatarFallback>
    </Avatar>
  )
}

Always give a fallback. The image shows only once it has loaded; until then, and when the URL is missing or broken, the fallback shows instead. Use two initials, uppercase, computed in the app from the name.

An avatar identifies someone; it does not replace their name. In tables, assignee fields and audit logs, print the name next to it.

Sizes

default (32px) fits lists and table rows. sm (24px) fits dense tables and inline mentions; lg (40px) fits profile headers and the account menu.

<>
  <Avatar size="sm">
    <AvatarFallback>MR</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarFallback>MR</AvatarFallback>
  </Avatar>
  <Avatar size="lg">
    <AvatarFallback>MR</AvatarFallback>
  </Avatar>
</>

Group

AvatarGroup overlaps the avatars and rings each one with the background color. AvatarGroupCount closes the row with the number of people not shown. Show three or four avatars at most.

<AvatarGroup role="group" aria-label="Assigned analysts">
  <Avatar>
    <AvatarFallback>MR</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarFallback>JL</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarFallback>PS</AvatarFallback>
  </Avatar>
  <AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>

With a badge

AvatarBadge places a dot on the bottom-right edge, sized to the avatar. It is bg-primary by default; pass a token class such as bg-success for presence. The dot is only a hint: say the state in text next to the avatar.

<div className="flex items-center gap-2">
  <Avatar>
    <AvatarFallback>MR</AvatarFallback>
    <AvatarBadge className="bg-success" />
  </Avatar>
  <div className="flex flex-col">
    <span className="text-sm font-medium">Marina Rocha</span>
    <span className="text-xs text-text-secondary">On call</span>
  </div>
</div>

Accessibility

• Set alt on AvatarImage to the person’s or tenant’s name. When the name is printed next to the avatar, alt="" avoids reading it twice.
• Screen readers read the fallback initials as letters. When the name is not visible, label the surrounding element, as the group example does with role="group" and aria-label.
• AvatarBadge has no text. Never let it be the only place a state appears.

API reference

Generated from the TypeScript source. className, style and children are accepted everywhere and omitted below.