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
ABCD
<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.

Name	Type	Default	Description
`image`	`string \| null`	`null`	URL of the image to display.
`label`	`string \| null`	`null`	Text 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.