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.
Show codeHide code
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.
Show codeHide code
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.
Show codeHide code
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.
Show codeHide code
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.
Show codeHide code
Avatars can have status indicators. Indicators positionning vary depending on the shape of the avatar. Use the dot prop to display a status indicator.
Show codeHide code
Avatars can have status indicators. Indicators positionning vary depending on the shape of the avatar. Use the dot prop to display a status indicator.
Show codeHide code
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.
Show codeHide code
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.
Show codeHide code
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.
Show codeHide code
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.
Show codeHide code
Fake avatars withstand the same props as regular avatars. You can also use badges and indicators on fake avatars using the same properties.
Show codeHide code
Fake avatars withstand the same props as regular avatars. You can also use badges and indicators on fake avatars using the same properties.
Show codeHide code
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.
Show codeHide code
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.
Show codeHide code
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.
Show codeHide code
rounded@default
'full'
Show exampleHide example
dotShow exampleHide example
srcShow exampleHide example
src-darkShow exampleHide example
badge-srcShow exampleHide example
textShow exampleHide example
size@default
'sm'
Show exampleHide example
maskShow exampleHide example
ring