Skip to content

Avatar

Avatars represent users or entities with images or initials fallback.

Sizes

Avatars come in xs, sm, md, lg, and xl sizes.

JDxs
JDsm
JDmd
JDlg
JDxl

With Image

Avatars can display user profile images.

Jane SmithBob WilsonAlice ChenNI

Group

AvatarGroup stacks avatars and shows an overflow count.

max:
User 1User 2User 3+2

Avatar Props

PropTypeDefaultDescription
srcstringURL of the avatar image.
altstringAlt text for the image. Also used to generate initials fallback.
size"xs" | "sm" | "md" | "lg" | "xl""md"Size of the avatar.
classNamestringAdditional CSS class names.

AvatarGroup Props

PropTypeDefaultDescription
maxnumberMaximum number of avatars to display before showing overflow count.
childrenReactNodeAvatar components to render in the group.

Related Components