atom

Avatar

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

Overview

The Avatar component displays user identity through initials or profile images. Colors are automatically generated from the user's name for visual consistency.

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
`colorScheme`	`'moonstone' \| 'wisteria' \| 'green' \| 'red' \| 'yellow' \| 'mauve'`	auto	Override auto-generated color
`testID`	`string`	-	ID for testing purposes

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="https://i.pravatar.cc/150?u=john"/> 
<Avatar
    name="Jane Smith"
    src="https://i.pravatar.cc/150?u=jane"/>

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 */}