Avatar

Atoms

Display user profile pictures with fallback to initials. Supports multiple sizes and graceful degradation when images fail to load.

Examples

Avatar Sizes

Different size variants for various contexts

Code:

<Stack direction="row" gap="md" alignItems="center">
  <Avatar name="John Doe" size="xs" />
  <Avatar name="Jane Smith" size="sm" />
  <Avatar name="Alex Johnson" size="md" />
  <Avatar name="Sarah Wilson" size="lg" />
  <Avatar name="Michael Brown" size="xl" />
</Stack>

With Profile Pictures

Avatars displaying actual profile images

Code:

<Avatar name="John Doe" picture="/assets/avatar.jpg" />

Props

Prop	Type	Default	Required	Description
`name`	`string`	—	Required	Full name of the person, used for initials fallback and accessibility
`picture`	`string`	—	—	URL of the profile picture image
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	—	—	Size variant affecting dimensions and font size
`data-testid`	`string`	—	—	Data test id for testing

Design Tokens Used

semantic.size.avatar.xssemantic.size.avatar.smsemantic.size.avatar.mdsemantic.size.avatar.lgsemantic.size.avatar.xlsemantic.color.avatar.backgroundsemantic.color.avatar.textsemantic.typography.avatar

Accessibility

General Notes:

• Alt text includes person's name for screen readers• Initials fallback when image unavailable• Circular shape provides clear visual boundary• Color contrast meets accessibility standards

Keyboard Navigation:

Not interactive - no keyboard navigation

Screen Reader:

Announced with person's name

Color Contrast:

Text on background meets WCAG AA requirements

Additional Notes

• Automatically generates initials from first and last name• Gracefully handles missing or broken image URLs• Sizes maintain consistent proportions across the design system• Background colors provide sufficient contrast for text• Use larger sizes for primary user identification, smaller for lists