Avatar

When to UseCopy Anchor Link

• to show someone next to their name, such as in the Sidebar’s account button, in a Table row, or on a Message
• as an AvatarGroup, for everyone on one record, with AvatarGroupCount for those who don’t fit, such as “+3”
• for a mark on the Avatar’s corner, like a check, with AvatarBadge

When Not to UseCopy Anchor Link

• for an image with a fixed ratio, like a cover photo (use an Aspect Ratio)
• for a status with a label (use a Badge)

AnatomyCopy Anchor Link

* An Avatar has an image, a fallback, or both.

ShapesCopy Anchor Link

To set the corner, pass shape. By default, it is round.

SizesCopy Anchor Link

In a Table, the Avatar sets the height of its row.

BehaviorCopy Anchor Link

An Avatar is a square with a fixed size, and it doesn’t shrink in a flex row.

LoadingCopy Anchor Link

AvatarImage isn’t rendered until its image has loaded. Until then, and when the image fails or has no src, AvatarFallback is shown. If you want to delay the fallback, set delay on it to a number of milliseconds. Users then don’t see the initials flash before an image that loads sooner.

BadgeCopy Anchor Link

AvatarBadge contains an icon and no text, and the icon is hidden at sm.

ContentCopy Anchor Link

AccessibilityCopy Anchor Link

An Avatar isn’t focusable and has no role. Screen readers read the alt of the image or, when no image is shown, the text of the fallback.

InstallationCopy Anchor Link

npx shadcn@latest add @summit/avatar

UsageCopy Anchor Link

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

<Avatar>
    <AvatarImage src="/camille-roy.jpg" alt="Camille Roy" />
    <AvatarFallback>CR</AvatarFallback>
</Avatar>;

Initials OnlyCopy Anchor Link

To show only the initials, omit AvatarImage.

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

SquareCopy Anchor Link

Set shape="square".

<Avatar shape="square">
    <AvatarFallback>CR</AvatarFallback>
</Avatar>

With a BadgeCopy Anchor Link

Place AvatarBadge last in the Avatar, with one icon inside it.

import { AvatarBadge } from '@/components/ui/avatar';
import { CheckIcon } from '@phosphor-icons/react';

<Avatar>
    <AvatarImage src="/camille-roy.jpg" alt="Camille Roy" />
    <AvatarFallback>CR</AvatarFallback>
    <AvatarBadge>
        <CheckIcon aria-hidden />
    </AvatarBadge>
</Avatar>;

A GroupCopy Anchor Link

Use the same size and the same shape for all the Avatars in a group. AvatarGroupCount follows them.

import { AvatarGroup, AvatarGroupCount } from '@/components/ui/avatar';

<AvatarGroup>
    <Avatar>
        <AvatarImage src="/camille-roy.jpg" alt="Camille Roy" />
        <AvatarFallback>CR</AvatarFallback>
    </Avatar>
    <Avatar>
        <AvatarImage src="/jonas-meyer.jpg" alt="Jonas Meyer" />
        <AvatarFallback>JM</AvatarFallback>
    </Avatar>
    <AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>;

API ReferenceCopy Anchor Link

Avatar, AvatarImage, and AvatarFallback accept the props of Avatar.Root, Avatar.Image, and Avatar.Fallback in Base UI. See the Base UI Avatar documentation for delay, keepMounted, and onLoadingStatusChange. The other three parts pass their props to their element.

AvatarCopy Anchor Link