Avatars can have different radius factors. The following example shows avatars using the rounded prop. Avatars can also be displayed as groups, using the <BaseAvatarGroup> component.

Avatars can have different radius factors. The following example shows avatars using the lg radius factor. Use the rounded prop to change the radius factor of the avatar.

Avatars can have different radius factors. The following example shows avatars using the md radius factor. Use the rounded prop to change the radius factor of the avatar.

Avatars can have different radius factors. The following example shows avatars using the sm radius factor. Use the rounded prop to change the radius factor of the avatar.

Avatars can have different radius factors. The following example shows avatars using the none radius factor. Use the rounded prop to change the radius factor of the avatar.

Avatars can have status indicators. Indicators positioning vary depending on the shape of the avatar. Use the dot prop to display a status indicator.

Avatars can have status indicators. Indicators positioning vary depending on the shape of the avatar. Use the dot prop to display a status indicator.

Avatars can have image badges. Badges can be used to display a skill, a flag, an icon or any relevant information. Use the src-badge prop to display a badge.

Avatars can have image badges. Badges can be used to display a skill, a flag, an icon or any relevant information. Use the src-badge prop to display a badge.

Sometimes, you need to display a placeholder avatar. When an image is not provided, the component defaults to the fake mode, using color and text instead of an image.

Sometimes, you need to display a placeholder avatar. When an image is not provided, the component defaults to the fake mode, using color and text instead of an image.

Fake avatars withstand the same props as regular avatars. You can also use badges and indicators on fake avatars using the same properties.

Fake avatars withstand the same props as regular avatars. You can also use badges and indicators on fake avatars using the same properties.

Fake avatars background and text color can be customized using Tailwind CSS bg-* and text-* utilities. Alternatively, you can use the Tairo getRandomColor() utility function to generate a random color.

Fake avatars background and text color can be customized using Tailwind CSS bg-* and text-* utilities. Alternatively, you can use the tairo getRandomColor() utility function to generate a random color.

Avatars can be displayed using SVG masks, bringing fancier shapes to your UI. Keep in mind that the mask prop is only available for the none radius factor.