import { Avatar, AvatarBadge } from '@zeal-ui/core';
Editable Code
<Avatar src="/avatar-1.png" alt="avatar" width="5rem" height="5rem" />;
Editable Code
<Avatarsrc="/avatar-1.png"alt="avatar"width="5rem"height="5rem"badge={<AvatarBadgecolor="secondary"width="0.75rem"height="0.75rem"bottom="0.35rem"right="0.35rem"/>}/>;
Editable Code
<Container type="row"><Avatar src="/avatar-1.png" alt="avatar" width="5rem" height="5rem" /><Avatar src="/avatar-2.png" alt="avatar" width="5rem" height="5rem" /><Avatar src="/avatar-3.png" alt="avatar" width="5rem" height="5rem" /></Container>;
src
Description
It is used to set the source of the image for the avatar.
Values
Path to the image.
alt
Description
It is used to set the alternate text when image is not available.
Values
Text describing the image.
width
Description
It is used to set the width of the avatar.
Values
String with valid width.
height
Description
It is used to set the height of the avatar.
Values
String with valid height.
badge
Description
It is used to set the badge for the avatar.
Values
Avatar Badge component.
width
Description
It is used to set the width of the avatar badge.
Values
String with valid width.
height
Description
It is used to set the height of the avatar badge.
Values
String with valid height.
bottom
Description
It is used to set the position of the avatar badge from the bottom of the avatar.
Values
String with valid value.
right
Description
It is used to set the position of the avatar badge from the right of the avatar.
Values
String with valid value.
color
Description
It is used to set the color of the avatar badge.
Values
primary | secondary | accent | error | warning | success
To learn about customizing the components check this section of the docs.