Skip to content
Aback UI

Data Display

Avatar

A square identity chip with an initials fallback, and an overlapping group with a counted overflow.

BetaUsed in Aback LaunchRegistry JSON (opens in a new tab)
AR

Aditi Rao

Design

AR
BK

Bilal Khan

Engineering

BK
CW

Chen Wei

Product

CW
ARBKCWand 5 more
8 reviewers on this release

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add avatar

Writes components/ui/avatar.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Usage

Import the parts you need from the installed file. The Code tab above has a complete, working example.

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

API reference

Props and composition points for Avatar. Native element props pass through.

PropTypeDefaultDescription
size"xs" | "sm" | "default" | "lg" | "xl""default"Sets the square footprint and the fallback type size.
AvatarImage src / altstring / stringNoneAlt text is required when the avatar identifies a person. Use an empty alt for a decorative avatar.
AvatarFallbackcomponentNoneRendered while the image loads and whenever it fails. Keep it to one or two initials.
classNamestringNoneLayout adjustments only.
AvatarGroup max / total / sizenumber / number / AvatarSizeNoneOverlap avatars, collapse the rest into a +N count, and count people beyond the rendered ones. Size the count to match the avatars.

Dependencies: radix-ui, plus the shared @/lib/utils helper.

Accessibility

Semantics, keyboard behavior, and the decisions that keep the component operable.

  • The image keeps real alt text. If the person's name appears next to it, the avatar is decorative and the alt can be empty.
  • Initials are a fallback, not a substitute for the name in the surrounding row.
  • Do not signal presence or role with avatar colour alone; add text or a labelled status.
  • The square shape is deliberate. Do not add rounded-full for a circle that conflicts with the system geometry.
  • AvatarGroup is a group; name it with aria-label. The overflow count reads as "and 5 more".

Used in production

The Aback products whose interfaces shaped this component.

Related