Elements UI Display Avatar

Avatar

A user image with an initials fallback, a delayed fallback, a status badge and groups.

Basic

An image, initials from the name, a failed image falling back, and an icon fallback.

🦊M

Code

<Avatar src={user.photo} alt="Ada Lovelace" />
<Avatar alt="Grace Hopper" />                    initials from alt
<Avatar src="/missing.png" alt="Alan Turing" />  falls back when it fails
<Avatar alt="Guest"><Icon slot="fallback" name="user" /></Avatar>

Usage

import { Avatar, AvatarBadge, AvatarGroup, AvatarGroupCount } from "@elements/ui/avatar";

<Avatar src={user.photo} alt={user.name} />
<Avatar src={user.photo} alt="Ada Lovelace" delayMs={600}>
  <AvatarBadge label="Online" />
</Avatar>
<AvatarGroup label="Project members">
  <Avatar src={a.photo} alt={a.name} />
  <Avatar src={b.photo} alt={b.name} />
  <AvatarGroupCount count={3} />
</AvatarGroup>

Examples

Badge

A status dot at the bottom right, named by label.

Code

<Avatar src={user.photo} alt="Ada Lovelace">
  <AvatarBadge label="Online" />
</Avatar>
<Avatar alt="Grace Hopper">
  <AvatarBadge label="Busy" tone="danger" />
</Avatar>
<Avatar src={user.photo} alt="Katherine Johnson" size="lg">
  <AvatarBadge label="Verified" tone="accent"><Icon name="check" /></AvatarBadge>
</Avatar>

Group

Overlapping avatars ringed in the page color, with a count.

Code

<AvatarGroup label="Project members">
  <Avatar src={a.photo} alt="Ada Lovelace" />
  <Avatar src={b.photo} alt="Grace Hopper" />
  <Avatar src={c.photo} alt="Katherine Johnson" />
  <AvatarGroupCount count={3} />
</AvatarGroup>

Sizes and shapes

sm, md and lg follow the control heights; square uses the control radius.

Code

<Avatar size="sm" src={...} alt="..." />
<Avatar src={...} alt="..." />
<Avatar size="lg" src={...} alt="..." />
<Avatar shape="square" src={...} alt="..." />

Loading and delay

The fallback waits delayMs before showing; the box never changes.

no changes yet

Code

<Avatar src={state.src} alt="Ada Lovelace" delayMs={600}
        onLoadingStatusChange={(s) => state.log.push(s)} />

Image attributes

imageAttrs reaches the img: srcset and sizes for a sharp image on dense screens, crossorigin and referrerpolicy for image hosts that need them.

Code

<Avatar src={photo40} alt="Ada Lovelace" size="lg"
        imageAttrs={{
          srcset: `${photo40} 40w, ${photo80} 80w`,
          sizes: "48px",
          crossorigin: "anonymous",
          referrerpolicy: "no-referrer",
          fetchpriority: "high",
        }} />

As a trigger

Inside a button, the shape a menu trigger takes.

Code

<button type="button" class="button is-ghost" aria-label="Account">
  <Avatar size="sm" src={user.photo} alt="" />
  <Icon name="chevron-down" />
</button>

Dropdown

An avatar button opens the account menu.

nothing picked

Code

<DropdownMenu align="end">
  <button slot="trigger" type="button" class={buttonClass("ghost", "md", { icon: true })} aria-label="Account">
    <Avatar size="sm" src={user.photo} alt="" />
  </button>
  <DropdownMenuLabel>Ada Lovelace</DropdownMenuLabel>
  <DropdownMenuItem>Profile</DropdownMenuItem>
  <DropdownMenuItem>Billing</DropdownMenuItem>
  <DropdownMenuItem>Settings</DropdownMenuItem>
  <DropdownMenuSeparator />
  <DropdownMenuItem>Log out</DropdownMenuItem>
</DropdownMenu>

With a tooltip

A clickable avatar names its person in a tooltip on hover and focus.

Code

<Tooltip content="Ada Lovelace">
  <button slot="trigger" type="button" class="avatar-button" aria-label="Ada Lovelace's profile">
    <Avatar src={user.photo} alt="" />
  </button>
</Tooltip>

RTL

A group overlaps toward the inline end and the badge sits at the bottom inline end, so both mirror.

Code

<div dir="rtl">
  <AvatarGroup label="أعضاء المشروع">
    <Avatar src={person1} alt="Ada Lovelace" />
    <Avatar src={person2} alt="Grace Hopper" />
    <AvatarGroupCount count={3} />
  </AvatarGroup>
  <Avatar src={person3} alt="Katherine Johnson"><AvatarBadge label="متصل" /></Avatar>
</div>

Reference Avatar in the manual Every part, attribute, slot, key and data attribute.