Show a thumbnail representation of an individual or entity.

The Avatar component can be used to show a visual representation of a user or entity. It helps to quickly identify users or objects.

<Avatar name="Alice Smith">
<Avatar.Image
alt="Alice Smith's avatar"
src="https://thispersondoesnotexist.com/image"
/>
</Avatar>

Instead of an image, the initial of the name or a placeholder icon can be used

<>
<Avatar name="Alice Smith">
<Avatar.Initial />
</Avatar>
<Avatar>
<Avatar.Placeholder />
</Avatar>
</>

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.

<Avatar name="">
<Avatar.Image alt="Alice Smith's avatar" src="" />
</Avatar>

When <Avatar.Initial /> is used but the name is missing, it will fallback to the placeholder icon.

<Avatar name="">
<Avatar.Initial />
</Avatar>

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>

Instead of an image, an icon can be passed.

<>
<Avatar>
<Avatar.Icon is={BatteryMedium} />
</Avatar>
</>

Size

The available sizes for this component are: xs, sm, md, lg, xl and xxl. The default is lg.

Edit me!

API Reference

Avatar

PropTypeDefaultRequired
size
"xxl" | "xs" | "sm" | "md" | "lg" | "xl"
lg

-

cssCSSProperties

-

-

Avatar.Image

PropTypeDefaultRequired
srcstring

-

altstring

-

Avatar.Initial

PropTypeDefaultRequired

Avatar.Placeholder

PropTypeDefaultRequired

Avatar.Icon

PropTypeDefaultRequired
isFC<IconProps>

-