Avatars can have different shapes. The following example shows avatars using the full shape. Avatars can also be displayed as groups, using the <BaseAvatarGroup> component.
Show codeHide code
Avatars can have different shapes. The following example shows avatars using the curved shape. Use the shape prop to change the shape 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 apollux 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 apollux 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 straight shape.
Show codeHide code
sizeShow exampleHide example
shapeShow exampleHide example
textShow exampleHide example
dotShow exampleHide example
srcShow exampleHide example
src-darkShow exampleHide example
badge-srcShow exampleHide example
maskShow exampleHide example
ring