The Avatar component's primary function is to display an image that typically represents a user's profile picture. However, the Avatar component goes beyond merely displaying an image; it provides several features and options for customization:
The flexibility, ease of use, and the built-in fallback and accessibility features of the Avatar component makes it a go-to choice for developers who need a reliable and customizable way to display user profiles in their applications. It allows for a wide range of creative implementations while ensuring a great and consistent user experience.
The three avatar-related components described below work together to give developers a flexible and powerful way to represent users within their applications. The Avatar represents the user, the AvatarBadge provides additional status information, and the AvatarGroup allows for showing multiple users together, each serving their own unique purpose, yet working harmoniously together. With the right combination, they can significantly enhance the visual representation of users in your application.
Avatar: As previously mentioned, the Avatar component is primarily used to display an image that represents the user. It accepts several props which allow for extensive customization of appearance and behavior. Key properties include src for the image source, name for the textual representation (used for generating initials in case of an image failure), size for defining the size of the avatar, borderRadius to change the shape, and borderColor and borderWidth to customize the border.
Additionally, you can apply any style props that Chakra UI provides, giving you more freedom to customize the look and feel of the Avatar to match your application's design system. This includes properties for color, spacing, typography, and more. Additionally, the Avatar component supports all standard HTML attributes and event handlers.
AvatarBadge: The AvatarBadge is a sub-component that allows you to add supplementary visual information to your Avatar. This badge is a small circular element that overlays the Avatar, typically placed at the bottom-right corner. It's commonly used to indicate a user's status, like online, offline, busy, and more.
You can customize the appearance of the AvatarBadge using Chakra UI's style props, and it's often colored to indicate the status. For instance, green for online, red for busy, and gray for offline. The boxSize prop can be used to adjust the size of the badge. It's as simple as nesting the AvatarBadge component within the Avatar component in your JSX code.
AvatarGroup:The AvatarGroup component is a handy wrapper that lets you display multiple Avatar components together in a stack. This is particularly useful when you want to show several users, such as a group chat or a list of contributors to a project.
The AvatarGroup component uses the spacing prop to adjust the distance between the stacked Avatars. When the number of Avatars exceeds a set limit, it can automatically show an excess indicator, which is a "+" sign followed by the number of extra Avatars not shown. This limit can be set with the max prop.
These components can be imported as follows:
Basic Avatar Implementation
Sizing for Avatars
Fallback for Avatar Loading Errors
In this example, we have an Avatar component for three different people, each with a different size and a broken link for the src prop, hence the images will not load. This provides us with an opportunity to explore the fallbacks provided by the Avatar component.
The first two avatars have a name prop, which the Avatar component uses to generate initials to display in the absence of an image. Additionally this, the bg prop is used to customize the background color of the fallback avatar. The icon prop is used to display a custom icon (from the react-icons library in this case) in place of the initials.
For the third avatar, we don't provide a name prop. In this case, Chakra UI will use the custom icon and background color specified by the icon and bg props as the fallback avatar.
Using Avatar Badges
In this example, we have a row of three Avatar components, each representing a different person with a respective image provided by the src prop. Nested within each Avatar component is an AvatarBadge. The boxSize prop is used to determine the size of each badge relative to the avatar's font size. For the first avatar, the badge has a green background, indicating that the user is online.
For the second and third avatars, we not only change the background color of the badge using the bg prop but also specify a border color using the borderColor prop. These badges could signify different statuses - for example, the "deeppink" badge could indicate a 'busy' status, and a yellow one could denote 'away' status.
By using these props, we can manipulate the appearance of each badge to suit our design needs, providing a clear and efficient way to visually communicate additional information to our users.
It's important to highlight that the em unit is used for sizing the AvatarBadge. This approach is beneficial because it allows the badge's size to adjust proportionally to the avatar's font size.
Displaying an Avatar Group
In this example, we have an AvatarGroup component that contains five individual Avatar components. The size prop in AvatarGroup applies to all Avatars, making them 'large'. The max prop limits the number of visible avatars to three. Avatars beyond this limit are not shown individually but are represented by a "+2" badge. The spacing prop is used to set the degree of overlap between the avatars, providing a compact, visually appealing user group display.
This functionality is useful, for instance, in a chat application where you may want to show a preview of the group's members, or in a project management tool where you would want to display the project's team members.
Modifying the Initials Logic
In this example, we've replaced the default initials logic with a new function that generates initials in reverse order. So, for 'Person One', the Avatar component will display 'OP' instead of the default 'PO'.
Remember, the getInitials prop accepts a function that takes the full name as an argument and returns the initials string. This means you can implement any initials logic that fits your specific needs.
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3