Name	Description	Default
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue

UserAvatar


import { UserAvatar } from '@proton/atoms';

UserAvatar is a component that displays a colored avatar with either the first letter or a greek later if no name is passed. The color is automatically generated based on the name, but can be customized using either HSL values or hue.

Basic usage

The most basic usage is to pass a name to the component:

<UserAvatar
  name="John Doe"
  size="medium"
/>

Sizes

UserAvatar comes in two sizes: small (1.75rem/28px) and medium (2rem/32px).

Color customization

You can customize the color using either a hue value or HSL string

Hue value example

HSL Color example

Display options

Anonymous

For anonymous user we show a random greek letter:

Multiple avatars

Common use case showing multiple avatars with automatically generated colors:

ABCDπ

Props

Name	Description	Default	Control
name	Name to display in the avatar, empty will show random greek letter string	""
className	Additional CSS classes string	-
color	Custom color configuration using hue value (0-360) or HSL string { hue: number } \| { hsl: string }	-
size	Size of the avatar smallmedium	medium	smallmedium
capitalize	Whether to capitalize the letter boolean	true
as	Custom element type ElementType	-

No Preview