Avatar components

The Avatar component automatically handles image loading failures by displaying fallback content. You can customize this fallback behavior using the initials prop to show user initials, the placeholderIcon prop to display a custom icon, or the placeholder prop for any custom React element.

Yes, you can display a user's online status by using the status prop with values "online" or "offline". This will add a status indicator dot to the bottom-right corner of the avatar.

Yes, you can add badges or indicators to avatars using the badge prop, which accepts React elements. This is useful for displaying company logos, verification status, or other important information. You can also use the verified prop to show a verification tick icon.

You can control the size of avatars using the size prop, which accepts values "xxs", "xs", "sm", "md", "lg", "xl", and "2xl". The default size is "md". This allows you to use appropriately sized avatars in different contexts of your application.