<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Avatar

A graphical representation of a user's profile image to visually identify them in different contexts.

Use Avatar...

  • To display a graphical representation of a user.

Don't use Avatar...

  • To display anything other than a user’s profile picture, e.g. a thumbnail, an image preview, an icon

The preview has been updated.

Size

Use size="mini" to reduce the size of the Avatar.

The preview has been updated.

Alt text

The Avatar image needs an alt attribute of some kind. Refer to Alt Text guidelines.

Props

Avatar
The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
altstring | nullfalse
A label to use to describe the avatar to assistive devices.
null
srcstring | nullfalse
URL of the avatar image
null
size"standard" | "mini" | nullfalse
The size variation
null
Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.


Published: Jun 21, 2024Last updated: Sep 18, 2024