Avatar

Basic

• There are 3 variants types of avatar: default, image, and letter

Sizes

• Avatar supports 7 sizes 2xs, xs, sm, md, lg, xl and responsive and can be changed by passing the size prop.
• Default size is md.

• With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
xs → xl	0px → 1279px	sm
xl → 3xl	1280px → 1919px	md
3xl → ∞	1920px → ∞	lg

Colors

• Avatar allow changed background color of default and letter type by using style or className prop.

Grouped

• AvatarGroup renders its children as a stack. Use the max prop to limit the number of Avatars.
• Each Avatar component will have alt prop, it will be using for the alt attribute of the image and the label of the Avatar on overflow items.

Sizes

• AvatarGroup supports 4 sizes xs, sm, md and responsive and can be changed by passing the size prop.
• Default size is md.

• With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
xs → xl	0px → 1279px	sm
xl → 3xl	1280px → 1919px	md
3xl → ∞	1920px → ∞	lg

Customize with tooltip