The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
Chakra UI exports 2 avatar related components:
Avatar: The image that represents the user.
AvatarBadge: A wrapper that displays it's content on the on the right corner of the avatar.
AvatarGroup: A wrapper to stack multiple Avatars together.
The Avatar component comes in 7 sizes
If there was an error loading the
src of the avatar, there are 2 fallbacks:
- If there's a
nameprop, we use it to generate the initials and a random, accessible background color.
- If there's no
nameprop, we use a default avatar.
Avatar with badge#
In some products, you might need show a badge on the right corner of the avatar, what we call a badge. Here's an example that shows if the user is online:
Note the use of
em for 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
- To limit the amount of avatars to show, use the
maxprop. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars).
- To size all the avatars equally, pass the size prop.
- To adjust the spacing between the avatars, pass 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 |
|children||The badge at the bottom right corner of the Avatar.|
Proudly made in 🇳🇬
Released under the MIT License.
Copyright © 2020 Segun Adebayo