Display user profile image, initials or fallback icon
To display initials instead of the default placeholder, set the name prop to the name of the person, for example, name="John Doe" . If the name is set, you can use color="initials" to generate a color based on the name:
By default, all colors from the default theme are allowed for initials. You can restrict them by providing the allowedInitialsColors prop with an array of colors. Note that the default colors array does not include custom colors defined in the theme – you need to provide them manually if needed.
If the image cannot be loaded or is not provided, Avatar will display a placeholder instead. By default, the placeholder is an icon, but it can be changed to any React node:
The 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 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 the component prop:
You can also use components in the component prop, for example, Next.js Link :
Polymorphic components with TypeScript
Note that polymorphic component prop types are different from regular components – they do not extend HTML element props of the default element. For example, Avatar Props does not extend React.ComponentProps '<' div '>' although div is the default element.
If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support the component prop), then your component props interface should extend HTML element props, for example:
If you want your component to remain polymorphic after wrapping, use the polymorphic function described in this guide .
Example of using Avatar as a link:
Avatar renders an <img /> HTML element. Set the alt prop to describe the image – it is also used as the title attribute for the avatar placeholder when the image cannot be loaded.