UserAvatar

Displays a circular avatar with user initials and a consistent color based on the user's name. Supports multiple sizes and optional name display.

Installation

typescript

import { UserAvatar } from '@happyvertical/smrt-users/svelte';

Basic Usage

The avatar displays initials derived from the user's name with a color consistently generated from the name.

svelte

<UserAvatar profile={{ name: 'Jane Smith' }} />

Sizes

Four sizes are available: sm, md (default), lg, and xl.

svelte

<UserAvatar profile={profile} size="sm" />
<UserAvatar profile={profile} size="md" />
<UserAvatar profile={profile} size="lg" />
<UserAvatar profile={profile} size="xl" />

With Name

Set showName to display the user's name alongside the avatar.

JS Jane Smith

svelte

<UserAvatar profile={profile} showName />
<UserAvatar profile={profile} size="lg" showName />

Consistent Colors

Each user gets a consistent color based on their name, making it easy to identify users across the application.

JS Jane Smith

JD John Doe

AJ Alice Johnson

svelte

<UserAvatar profile={{ name: 'Jane Smith' }} showName />
<UserAvatar profile={{ name: 'John Doe' }} showName />
<UserAvatar profile={{ name: 'Alice Johnson' }} showName />

Props

Prop	Type	Default	Description
`profile` *	`Profile`	-	Profile object containing user name for initials and color generation
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Avatar size variant
`showName`	`boolean`	`false`	Whether to display the user name next to the avatar

TypeScript

typescript

import type { Profile } from '@happyvertical/smrt-profiles';

interface Props {
  profile: Profile;
  size?: 'sm' | 'md' | 'lg' | 'xl';
  showName?: boolean;
}