The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.
Chakra UI exports 3 avatar-related components:
Avatar: The image that represents the user.
AvatarBadge: A wrapper that displays its content on the right corner of the avatar.
AvatarGroup: A wrapper to stack multiple Avatars together.
Avatar component comes in 7 sizes.
If there was an error loading the
src of the avatar, there are 2 fallbacks:
nameprop, we use it to generate the initials and a random, accessible background color.
nameprop, we use a default avatar.
You can customize the background color and icon of the fallback avatar icon to match your design requirements.
In some products, you might need to show a badge on the right corner of the avatar, which we call a badge. Here's an example that shows if the user is online:
Note the use of
emfor the size of the
AvatarBadge. This is useful to size the badge relative to the avatar font size.
In some cases, you might need to stack avatars as a group. Use the
maxprop. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars).
getInitials prop to allow users to manage how initials are generated
from name. By default we merge the first characters of each word in the
The Avatar component composes
Box component so you can pass props for
|size||The size of the avatar|
|name||The name of the user in the avatar|
|src||The image url of the |
|icon||The icon to use for the fallback avatar|
|children||The badge at the bottom right corner of the Avatar.|