Prism Docs

Avatar

Displays a user's profile image or initials in various sizes and shapes.

Shapes

CS
<prism-avatar label="C" shape="circle" size="lg"></prism-avatar>
<prism-avatar label="S" shape="square" size="lg"></prism-avatar>

Sizes

SMLXL
<prism-avatar label="S" size="sm"></prism-avatar>
<prism-avatar label="M" size="md"></prism-avatar>
<prism-avatar label="L" size="lg"></prism-avatar>
<prism-avatar label="XL" size="xl"></prism-avatar>

Images & Fallbacks

AvatarABCD
<prism-avatar image="https://i.pravatar.cc/150?u=1" size="lg"></prism-avatar>
<prism-avatar label="AB" size="lg" style="background-color: #3b82f6; color: white"></prism-avatar>
<prism-avatar label="CD" size="lg" style="background-color: #ef4444; color: white"></prism-avatar>
NameTypeDefaultDescription
imagestring | nullnullURL of the image to display.
labelstring | nullnullText to display if no image (e.g. initials).
size'sm' | 'md' | 'lg' | 'xl''md'Size of the avatar.
shape'circle' | 'square''circle'Shape of the avatar.