Atom

Avatar

Displays a user avatar with initials or image. Supports auto-generated colors from name and responsive sizing.

Overview

The Avatar component displays user identity through initials or profile images. Colors are automatically generated from the user's name for visual consistency, and the component supports responsive sizing across breakpoints.

Props

Prop	Type	Default	Description
`name`	`string`	-	Required. User's name for initials and auto color generation
`size`	`ResponsiveValue<'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'>`	`'md'`	Avatar size - can be responsive object
`src`	`string`	-	Image URL - shows image instead of initials
`alt`	`string`	name	Alt text for image
`color`	`'moonstone' \| 'wisteria' \| 'green' \| 'red' \| 'yellow' \| 'mauve'`	auto	Override auto-generated color
`loading`	`'lazy' \| 'eager'`	`'lazy'`	Image loading strategy

Variants

Sizes

Five size options from extra-small to extra-large.

<Avatar name="John Doe" size="xs" />
<Avatar name="John Doe" size="sm" />
<Avatar name="John Doe" size="md" />
<Avatar name="John Doe" size="lg" />
<Avatar name="John Doe" size="xl" />

Auto-Generated Colors

Colors are automatically generated from names for consistency.

<Avatar name="Alice Johnson" />
<Avatar name="Bob Smith" />
<Avatar name="Carol White" />
<!-- Colors auto-generated from name hash -->

Manual Colors

Override auto-generated colors when needed.

Examples

With Image

When an image fails to load, initials are shown as fallback.

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

Responsive Size

Different sizes at different breakpoints (resize browser to see).

<Avatar
  name="Responsive User"
  size={{ xs: 'sm', md: 'md', lg: 'lg' }}
/>

Initials Generation

Single names use first two letters; multiple names use initials.

<Avatar name="Madonna" />        {/* MA */}
<Avatar name="Prince" />         {/* PR */}
<Avatar name="John Doe" />       {/* JD */}
<Avatar name="Mary Jane Watson" /> {/* MJ */}