Avatar

Shows a person's photo, with their initials as a fallback.

Code

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

<Avatar>
  <AvatarImage src="/maya.jpg" alt="Maya Chen" />
  <AvatarFallback>MC</AvatarFallback>
</Avatar>

Examples

Example source

var P = window.PUI, h = React.createElement;
  ReactDOM.createRoot(document.getElementById('preview')).render(h('div', { className: 'pui-row' },
    h(P.Avatar, { fallback: 'MC', alt: 'Maya Chen' }),
    h(P.Avatar, { fallback: 'LP', alt: 'Leo Park' }),
    h('div', { className: 'pui-inline' }, h(P.Avatar, { fallback: 'SD', alt: 'Sara Diaz' }),
      h('div', null, h('div', { style: { fontWeight: 500 } }, 'Sara Diaz'), h('div', { className: 'pui-muted' }, 'sara@company.com')))));

Usage

What you provide

AvatarImage with src and alt = the person's name; AvatarFallback with two initials.
size: sm | default (32px) | lg.
Next to the avatar, the name in font-medium and a detail in text-muted-foreground.

Accessibility

The image alt is the person's name. When the name is already written next to the avatar, use alt="" so it isn't read twice.
The fallback initials are not a substitute for the name in text.

Adapted from Magoo 1.6.0 by Marcelo Sales: Cards (cards). Magoo is educational guidance; test the behavior in your implementation.

API

Install with:

npx @aline-aroucha/pui add avatar

<Avatar>
  <AvatarImage />
  <AvatarFallback />
  <AvatarBadge />
</Avatar>

<AvatarGroup>
  <Avatar />
  <AvatarGroupCount />
</AvatarGroup>

Avatar

Name	Type	Default
`size`	`"sm" \| "default" \| "lg"`	`"default"`
Avatar size; default is 32px.

AvatarImage

Name	Type
`src`Required	`string`
Image URL.
`alt`Required	`string`
The person's name, or "" when the name is written next to the avatar.

AvatarFallback

Name	Type
`children`	`ReactNode`
Two initials, shown while the image loads or when it fails.

AvatarBadge

Name	Type
`children`	`ReactNode`
A small status mark; give it a text alternative.

AvatarGroupCount

Name	Type
`children`	`ReactNode`
How many more people the group holds, e.g. "+3".