Avatar

The Avatar Component is used to represent a user's profile picture, initial or fallback icon.

If the src is not passed or it's empty there are 2 fallbacks.

• If there is the alt attribute, it will be used as the name of the avatar.
• If there is neither src nor alt attribute, a default icon will be used.

If the data-show-fallback="true" is not passed, the fallbacks will not be displayed.

To customize the dault fallback icon, use the <div class-"fallback"></div> and your icon inside.

Note: If you set the tabindex attribute, it makes the avatar focusable for keyboard navigation and will add the focus ring when focused.

You can limit the number of avatars displayed by passing the data-max attribute and set the value as your desire.

You can display the total number of avatars by passing the data-total attribute and set the value as your desire.

You can also customize the count displayed when the data-total attribute is passed using the data-count and the data-count-class attributes.

By passing the data-grid attribute to the avatar-group element, the avatars will be displayed in a grid layout.

• avatar: Avatar wrapper which includes styles for focus ring, position, and general appearance.
• img: Image element within the avatar which includes styles for opacity transition and size.
• fallback: Fallback content when the image fails to load or is not provided which includes styles for centering the content (dynamic).
• name: Initials displayed when the image is not provided or fails to load which includes styles for font, text alignment, and inheritance (dynamic).
• icon: Default Icon element within the avatar which includes styles for centering the content, text inheritance, and size (dynamic).

You can customize any part of the avatar by using different tailwind classes like this:

Avatar has the following attributes on the base element:

• data-disabled: Whether the avatar is disabled.
• data-bordered: Adds a border around the avatar.
• data-show-fallback: Shows the fallback icon or initials when the image fails to load.

AvatarGroup has the following attributes on the base element:

• data-disabled: Whether the avatar group is disabled.
• data-max: The maximum number of visible avatars.
• data-total: Control the number of avatar not visible.
• data-grid: Whether the avatars should be displayed in a grid.
• data-count: The text inside the custom count.
• data-count-class: The classes for customizing the custom count.