DATA DISPLAY

Avatar

User avatar with image + initial fallback. Built on Radix Avatar — when the image fails to load (or while loading), the fallback is shown instead.

Import

import { Avatar, AvatarImage, AvatarFallback, AvatarGroup } from 'damo-ui'

Image + fallback

DM
1<Avatar>
2  <AvatarImage src="/users/dm.jpg" alt="Damo" />
3  <AvatarFallback>DM</AvatarFallback>
4</Avatar>

Sizes

SMLXL
1<Avatar size="sm"><AvatarFallback>S</AvatarFallback></Avatar>
2<Avatar size="md"><AvatarFallback>M</AvatarFallback></Avatar>
3<Avatar size="lg"><AvatarFallback>L</AvatarFallback></Avatar>
4<Avatar size="xl"><AvatarFallback>XL</AvatarFallback></Avatar>

Square shape

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

AvatarGroup with overflow

Stack multiple avatars; max caps the visible count and renders a +N bubble for the rest.

A
B
C
+2
1<AvatarGroup max={3}>
2  <Avatar><AvatarFallback>A</AvatarFallback></Avatar>
3  <Avatar><AvatarFallback>B</AvatarFallback></Avatar>
4  <Avatar><AvatarFallback>C</AvatarFallback></Avatar>
5  <Avatar><AvatarFallback>D</AvatarFallback></Avatar>
6  <Avatar><AvatarFallback>E</AvatarFallback></Avatar>
7</AvatarGroup>

Props

Avatar props
PropTypeDefaultDescription
size'sm' | 'md' | 'lg' | 'xl''md'8/10/14/20 pixel diameter respectively.
shape'circle' | 'square''circle'square adds a 2px Memphis border and removes the rounding.
childrenReactNode—Compose with AvatarImage and AvatarFallback.

Accessibility

  • Always pass alt on AvatarImage — for decorative avatars an empty string is acceptable; otherwise describe the user.
  • The fallback is purely visual — the alt text on the image (when present) carries the accessible name.
← AttrToggleGroupAccordion →