Avatar

Avatar represents a person, team, or other identity with an image or text fallback. It can also display a status badge or join an overlapping avatar group.

Use the fallback for initials or a short recognizable label. It appears while the image loads and remains visible when the image cannot be loaded.

Live previewInteractive / Local

ARGV

Installation

Sourcebash

pnpm dlx shadcn@latest add http://ui.argv-tech.dev/r/avatar.json

Usage

Sourcetsx

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

<Avatar>
    <AvatarImage src="/operator.jpg" alt="Sam Rivera" />
    <AvatarFallback>SR</AvatarFallback>
</Avatar>

Composition

Sourcetext

Avatar
├── AvatarImage
├── AvatarFallback
└── AvatarBadge (optional)

AvatarGroup
├── Avatar
└── AvatarGroupCount (optional)

Set size="sm", "default", or "lg" on Avatar. The image, fallback, and badge adjust with the root size.

Use AvatarGroup when several identities belong to the same context. AvatarGroupCount can summarize additional members that do not fit in the visible group.

API Reference

Avatar

Prop	Type	Default
`size`	`"sm"` \| `"default"` \| `"lg"`	`"default"`
`className`	`string`	-

AvatarImage

Forwards Base UI image props, including native image attributes such as src and alt.

Prop	Type	Default
`className`	`string`	-

AvatarFallback

Forwards Base UI fallback props and is displayed while the image is unavailable.

Prop	Type	Default
`className`	`string`	-

AvatarBadge, AvatarGroup, and AvatarGroupCount

These layout helpers forward the native props of their rendered span or div, including className and ARIA attributes.

Accessibility

Use meaningful alt text when the image is the only place that identifies a person. If nearby text already provides the same name, use an empty alt to avoid a duplicate announcement.

Give status-only badges and group counts screen-reader text. Do not rely on a colored dot alone to communicate availability.