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 is 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. We call this 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
|css||The emotion's css style object||-|
|getInitials||Function to get the initials to display||-|
|icon||The default avatar used as fallback when `name`, and `src` is not specified.||-|
|loading||Defines loading strategy||-|
|name||The name of the person in the avatar. - if `src` has loaded, the name will be used as the `alt` attribute of the `img` - If `src` is not loaded, the name will be used to create the initials||-|
|onError||Function called when image failed to load||-|
|showBorder||If `true`, the `Avatar` will show a border around it. Best for a group of avatars||-|
|size||The size of the avatar.||-|
|src||The image url of the `Avatar`||-|
|srcSet||List of sources to use for different screen resolutions||-|