If the image cannot be loaded or not provided,
Avatar will display a placeholder instead. By default,
placeholder is an icon, but it can be changed to any React node:
Avatar.Group component combines multiple avatars into a stack:
Note that you must not wrap child
Avatar components with any additional elements,
but you can use wrap
Avatar with components that do not render any HTML elements
in the current tree, for example Tooltip.
Example of usage with Tooltip:
Avatar is a polymorphic component – its default root element is
div, but it can be changed to any other element or component with
You can also use components in
component prop, for example, Next.js
Polymorphic components with TypeScript
Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example,
AvatarPropsdoes not extend
divis the default element.
If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support
componentprop), then your component props interface should extend HTML element props, for example:
If you want your component to remain polymorphic after wrapping, use
createPolymorphicComponentfunction described in this guide.
<img /> HTML element. Set
alt prop to describe image,
it is also used as
title attribute for avatar placeholder when the image cannot be loaded.