Avatar

Size variants

AAAAAAAAAA

<FuiAvatar name="Alice" :size="32" />
<FuiAvatar name="Alice" :size="64" />

With image

AB

<FuiAvatar name="Alice" src="https://i.pravatar.cc/40?img=1" />

Shape

AB

<FuiAvatar name="Alice" shape="circular" />
<FuiAvatar name="Bob" shape="square" />

AvatarGroup

ABCD

<FuiAvatarGroup>
  <FuiAvatar name="Alice" src="..." />
  <FuiAvatar name="Bob" src="..." />
</FuiAvatarGroup>

Props

Avatar

Prop	Type	Default	Description
name	string	required	Initials source
src	string	undefined	Image URL
size	16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120	32	Avatar size
shape	circular | square	circular	Border shape
color	string	undefined	Color preset (brand, etc.)

AvatarGroup

Prop	Type	Default	Description
size	number	32	Avatar size
layout	spread | stack	spread	Layout arrangement