Avatar

An avatar displays a photo, icon, or initials to represent a user, team, or entity.

Default

Name	Description	Default	Control
initials	(optional) Custom initials. It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop, using the `getInitials` function. The initials are displayed when there is no image (including while the image is loading). ShorthandProps<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" \| keyof HTMLAttributes<...>> & { ...; } & { ...; }>	-
icon	Icon to be displayed when the avatar doesn't have an image or initials. ShorthandProps<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" \| keyof HTMLAttributes<...>> & { ...; } & { ...; }>	-
badge	Badge to show the avatar's presence status. ShorthandProps<SlotProps<Omit<{ root?: ShorthandProps<Omit<{ as?: "div"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" \| keyof HTMLAttributes<...>> & { ...; } & { ...; }, "color">>; }, "root"> & Omit<...> & Partial<...> & RefAttributes<...>>>	-
as	"span"	-	span
name	The name of the person or entity represented by this Avatar. This should always be provided if it is available. The name will be used to determine the initials displayed when there is no icon, as well as provided to accessibility tools. string	-
size	Size of the avatar in pixels. Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and based on design guidelines for the Avatar control. If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height` to override the rendered size. For example, to set the avatar to 45px in size: `<Avatar size={40} style={{ width: '45px', height: '45px' }} />` 2024283236404856	-
shape	The avatar can have a circular or square shape. "circular""square"	-	circularsquare
active	Optional activity indicator * active: the avatar will be decorated according to activeAppearance * inactive: the avatar will be reduced in size and partially transparent * unset: normal display "active""inactive""unset"	-	activeinactiveunset
activeAppearance	The appearance when `active="active"` "ring""shadow""ring-shadow"	-	ringshadowring-shadow
idForColor	Specify a string to be used instead of the name, to determine which color to use when color="colorful". Use this when a name is not available, but there is another unique identifier that can be used instead. string	-
image	The Avatar's image. Cannot be typed as a normal slot since it should not accept any children but can accept a children render function. (Omit<{ as?: "img"; } & Pick<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" \| keyof ImgHTMLAttributes<...>> & { ...; } & { ...; }, "children"> & { ...; })	-