Avatar

data-display

User avatar with initials fallback, five size variants (xs–xl), online/offline/busy status indicators, image support, and grouped layout with overflow count. Uses role=img with aria-label.

Import

typescript
import { Avatar } from "packages/ui/src";

Props

AvatarProps

PropTypeRequired
srcstringNo
altstringYes
sizeAvatarSizeNo
statusAvatarStatus) + AvatarGroupProps (childrenNo
maxnumberNo

Examples

Avatar

User avatar with initials fallback, size variants, status indicators, and grouped layout.

Sizes

With Images

Status Indicators

Online

Offline

Busy

Avatar Group

All visible

max=3 of 6

+3

Metadata

Component Metadata
Familydata-display
FrameworksNext.js, Astro/EmDash
DescriptionUser avatar with initials fallback, five size variants (xs–xl), online/offline/busy status indicators, image support, and grouped layout with overflow count. Uses role=img with aria-label.
PropsAvatarProps (src?: string, alt: string, size?: AvatarSize, status?: AvatarStatus) + AvatarGroupProps (children, max?: number)
Stateswith-image, initials-fallback, online, offline, busy, grouped, overflow
A11y
  • role=img on avatar with aria-label
  • Image aria-hidden when role=img provides label
  • Status dot aria-label for status
  • AvatarGroup role=group with aria-label
Responsive
  • Fixed size via tokens
  • Group wraps naturally in flex
Motion
  • No animation by default
Token Dependencies
  • components.avatar.borderRadius
  • components.avatar.borderColor
  • components.avatar.borderWidth
  • components.avatar.background
  • components.avatar.textColor
  • components.avatar.fontWeight
  • components.avatar.sizeXs
  • components.avatar.sizeSm
  • components.avatar.sizeMd
  • components.avatar.sizeLg
  • components.avatar.sizeXl
  • components.avatar.statusDotSize
  • components.avatar.statusOnline
  • components.avatar.statusOffline
  • components.avatar.statusBusy
  • components.avatar.groupOverlap
Content Slotsalt (string for initials), src (image URL)
CMS Bindings
  • User profile image from CMS
  • Author avatar from collection
Test Cases
  • Renders initials from name
  • Renders image when src provided
  • Applies size class
  • Shows status dot
  • Has role=img with aria-label
  • AvatarGroup renders children
  • AvatarGroup shows overflow count
  • Passes className through