Avatar Preview
An avatar shows an image or text to represent a person or group as well as give additional information like their status and activity.
If you need to represent many avatars, try avatar group.
Properties
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”
“unset”
activeAppearance
The appearance when
active=“active”
“ring”
“shadow”
“ring-shadow”
“ring”
as
“span”
badge
Badge to show the avatar’s presence status.
WithSlotShorthandValue<WithSlotRenderFunction<Omit<ComponentProps<Pick<BadgeSlots, "root" | "icon">, "root">, "color"> & Pick<BadgeProps, "size"> & { ...; } & RefAttributes<...>>> | nullcolor
The color when displaying either an icon or initials.
- neutral (default): gray
- brand: color from the brand palette
- colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)
- specific color from the theme
“neutral”
“brand”
“colorful”
“dark-red”
“cranberry”
“red”
“pumpkin”
“peach”
“marigold”
“gold”
“brass”
“brown”
“forest”
“seafoam”
“dark-green”
“light-teal”
“teal”
“steel”
“blue”
“royal-blue”
“cornflower”
“navy”
“lavender”
“purple”
“grape”
“lilac”
“pink”
“magenta”
“plum”
“beige”
“mink”
“platinum”
“anchor”
“neutral”
icon
Icon to be displayed when the avatar doesn’t have an image or initials.
WithSlotShorthandValue<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | null`PersonRegular` (the default icon’s size depends on the Avatar’s size)
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.
Usage e.g.:
image=[object Object]
({ as?: "img"; } & Omit<Pick<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | keyof ImgHTMLAttributes<...>> & { ...; }, "children"> & { ...; }) | nullinitials
(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).
WithSlotShorthandValue<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | nullname
The name of the person or entity represented by this Avatar. This should always be provided if it is available.
The name is used to determine the initials displayed when there is no image. It is also provided to accessibility tools.
string
shape
The avatar can have a circular or square shape.
“circular”
“square”
“circular”
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.
Note: At size 16, if initials are displayed, only the first initial will be rendered.
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' }} />
16
20
24
28
32
36
40
48
56
64
72
96
120
128
32