The Avatar component can be used to show a visual representation of a user or entity. It helps to quickly identify users or objects. An image, the initial of the name or a placeholder icon can be used.
<div className="flex gap-3">
<Avatar name="Alice Smith">
<Avatar.Image
alt="Alice Smith's avatar"
src="https://picsum.photos/id/838/200/200"
/>
</Avatar>
<Avatar name="Alice Smith">
<Avatar.Initial />
</Avatar>
<Avatar>
<Avatar.Placeholder />
</Avatar>
</div>
Fallback behaviour
When an image src is missing it will fallback to the initial of the name.
<Avatar name="Alice Smith">
<Avatar.Image alt="" src="" />
</Avatar>
When the name is also missing it will fallback to the placeholder icon.
<div className="flex gap-3">
<Avatar name="">
<Avatar.Image alt="Alice Smith's avatar" src="" />
</Avatar>
<Avatar name="">
<Avatar.Initial />
</Avatar>
</div>
Avatar.icon
You can can also use an icon
<Avatar name="Alice Smith">
<Avatar.Icon is={BatteryMedium} />
</Avatar>
onClick
An onClick prop can be used, this will make the component focusable using the keyboard, as it uses a <button> under the hood.
<Avatar name="Alice Smith" onClick={() => alert('Thanks for clicking')}>
<Avatar.Initial />
</Avatar>
When disabled, the onClick won't work.
<Avatar
name="Alice Smith"
disabled
onClick={() => alert('This message will not appear')}
>
<Avatar.Initial />
</Avatar>
Size
The available sizes for this component are: xs, sm, md, lg, xl and xxl. The default is lg.
<>
<Avatar size="xs"
name="">
<Avatar.Initial />
</Avatar>
<Avatar name="" size="sm">
<Avatar.Initial />
</Avatar>
<Avatar name="" size="md">
<Avatar.Initial />
</Avatar>
<Avatar name="" size="lg">
<Avatar.Initial />
</Avatar>
<Avatar name="" size="xl">
<Avatar.Initial />
</Avatar>
<Avatar name="" size="xxl">
<Avatar.Initial />
</Avatar>
</>
Emphasis
The optional prop emphasis can be set to either bold, subtle, or white (default). This changes the background of the Avatar.Initial to be based on the first letter of the passed in name. Bold colours have white text, and subtle colours are more pastel and keep the grey text colour.
<> <Avatar
name="Alice Smith"
emphasis="subtle"
>
<Avatar.Initial />
</Avatar> <Avatar
name="Lara Jean"
emphasis="bold"
>
<Avatar.Initial />
</Avatar> <Avatar
name="John Smith"
emphasis="white"
>
<Avatar.Initial />
</Avatar> </>