Avatar

An image element with a fallback for representing the user.

CMSPayload CMS Integration

Avatars can be populated from CMS user profiles with automatic fallback generation from user initials when images are unavailable.

CMS Demo

See how content editors configure avatars in a CMS:

John DoeSoftware Engineer

CMS FieldsEN

Name

Role

Size

Use Avatar Image

Show Status Badge

Show as Group

This simulates how a content editor manages user avatars in Payload CMS. Initials are auto-generated from the name field.

CMS ConfigurationSimulates Payload CMS avatar configuration with user profiles

Payload Collection Example

// In your Payload CMS collections config
export const Users = {
  slug: "users",
  fields: [
    { name: "name", type: "text", required: true },
    { name: "email", type: "email", required: true },
    {
      name: "avatar",
      type: "upload",
      relationTo: "media",
    },
    {
      name: "initials",
      type: "text",
      admin: {
        description: "Auto-generated from name if not provided",
      },
    },
    {
      name: "status",
      type: "select",
      options: [
        { label: "Online", value: "online" },
        { label: "Away", value: "away" },
        { label: "Offline", value: "offline" },
      ],
    },
  ],
}

Rendering the Avatar

import {
  Avatar,
  AvatarImage,
  AvatarFallback,
  AvatarBadge,
} from "@mordecai-design-system/ui"

export function UserAvatar({ user }) {
  const initials = user.initials || user.name
    .split(" ")
    .map((n) => n[0])
    .join("")
    .toUpperCase()

  return (
    <Avatar size={user.size}>
      <AvatarImage src={user.avatar?.url} alt={user.name} />
      <AvatarFallback>{initials}</AvatarFallback>
      {user.status === "online" && <AvatarBadge />}
    </Avatar>
  )
}

Basic Usage

shadcn

@shadcn

SMMDLG

CNOnline status

U1U2U3

Team members

AvatarUser avatar with fallback

Installation

pnpm add @corew500/ui

Usage

import {
  Avatar,
  AvatarImage,
  AvatarFallback,
} from "@mordecai-design-system/ui"

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="User" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Examples

With Badge

<Avatar>
  <AvatarImage src="/avatar.png" alt="User" />
  <AvatarFallback>JD</AvatarFallback>
  <AvatarBadge />
</Avatar>

Avatar Group

<AvatarGroup>
  <Avatar>
    <AvatarImage src="/user1.png" alt="User 1" />
    <AvatarFallback>U1</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="/user2.png" alt="User 2" />
    <AvatarFallback>U2</AvatarFallback>
  </Avatar>
  <AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>

Sizes

<Avatar size="sm">
  <AvatarFallback>SM</AvatarFallback>
</Avatar>

<Avatar size="default">
  <AvatarFallback>MD</AvatarFallback>
</Avatar>

<Avatar size="lg">
  <AvatarFallback>LG</AvatarFallback>
</Avatar>

Sub-components

| Component | Description | |-----------|-------------| | Avatar | Root container with size variants | | AvatarImage | The image element | | AvatarFallback | Fallback content when image fails | | AvatarBadge | Status indicator badge | | AvatarGroup | Container for multiple avatars | | AvatarGroupCount | Shows overflow count |

Props

Avatar

Prop	Type	Default	Description
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`size`	enum	—	—

AvatarImage

Prop	Type	Default	Description
`onLoadingStatusChange`	(status: ImageLoadingStatus) => void	—	Callback fired when the loading status changes.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.